javascript 基于单选按钮启用/禁用提交按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5818415/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enable/Disable Submit Button based on radio buttons
提问by Ferdia O'Brien
I have a form layed out like this:
我有一个这样的表格：
<form action="join-head-2-head.php" method="POST" enctype="application/x-www-form-urlencoded">
<table border="0" cellspacing="4" cellpadding="4">
<tr>
<td colspan="2"><input name="player1rules" type="radio" id="tandcy" value="y" />
<label for="tandcy">I Have Reviewed The Rules And The Terms & Conditions And Agree To Abide By Them</label></td>
</tr>
<tr>
<td colspan="2"><input name="player1rules" type="radio" id="tandcn" value="n" checked="checked" /><label for="tandcn">I Do Not Agree To The Terms And Condtions And/Or Have Not Read The Rules</label></td>
</tr>
<tr>
<td width="100"><input name="player1" type="hidden" value="<? $session->username; ?>" /></td>
<td><input type="submit" name="join" id="join" value="Take Available Slot" /></td>
</tr>
</table>
</form>
What I am hoping to do is disable the submit button if id="tandcn" is selected, and enable it when id="tandcy". Is there an easy way to do that using javascript?
我希望做的是在选择 id="tandcn" 时禁用提交按钮，并在 id="tandcy" 时启用它。有没有一种简单的方法可以使用 javascript 做到这一点？
回答by Mark Coleman
$(":radio[name='player1rules']").click(function() {
var value = $(this).val();
if (value === "n") {
$("#join").attr("disabled", "disabled");
return;
}
$("#join").removeAttr("disabled");
});
回答by user9440008
Lots answers based on jquery (which I recommended to use). Here your form with javascript
很多基于 jquery 的答案（我推荐使用）。在这里你的表单与 javascript
<script type="text/javascript">
function disable(id){
document.getElementById(id).disabled = 'disabled';
}
function enable(id){
document.getElementById(id).disabled = '';
}
</script>
<form action="join-head-2-head.php" method="POST" enctype="application/x-www-form-urlencoded">
<table border="0" cellspacing="4" cellpadding="4">
<tr>
<td colspan="2"><input name="player1rules" type="radio" id="tandcy" value="y" onclick='enable("join")' />
<label for="tandcy">I Have Reviewed The Rules And The Terms & Conditions And Agree To Abide By Them</label></td>
</tr>
<tr>
<td colspan="2"><input name="player1rules" onclick='disable("join")' type="radio" id="tandcn" value="n" checked="checked" /><label for="tandcn">I Do Not Agree To The Terms And Condtions And/Or Have Not Read The Rules</label></td>
</tr>
<tr>
<td width="100"><input name="player1" type="hidden" value="<? $session->username; ?>" /></td>
<td><input type="submit" DISABLED name="join" id="join" value="Take Available Slot" /></td>
</tr>
</table>
</form>
However more elegant way is use jquery.
然而更优雅的方式是使用 jquery。
回答by Kris Ivanov
example http://jsfiddle.net/sWLDf/
$(function () {
var $join = $("input[name=join]");
var processJoin = function (element) {
if(element.id == "tandcn") {
$join.attr("disabled", "disabled");
}
else {
$join.removeAttr("disabled")
}
};
$(":radio[name=player1rules]").click(function () {
processJoin(this);
}).filter(":checked").each(function () {
processJoin(this);
});
});
回答by Karthik
$(document).ready(function(){
if($('#tandcy').is(':checked')){
$('#join').attr('disabled','disabled');
}
if($('#tandcn').is(':checked')){
$('#join').removeAttr('disabled','disabled');
}
$('#tandcn').click(function(){
$('#join').attr('disabled','disabled');
});
$('#tandcy').click(function(){
$('#join').removeAttr('disabled','disabled');
})
});
Try this.... you need jquery for this,....
试试这个....你需要jquery来做这个，....
回答by Abdul Kader
$("#tandcn #tandcy").livequery('change', function(event){
if ($('#tandcn').is(":checked"))
{
$('#join').hide();
//or
$('#join').attr("disabled", false);
}
else($('#tandcy').is(":checked"))
{
$('#join').show();
//or
$('#join').attr("disabled", false);
}
});
