javascript 如何在选中复选框之前禁用按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28428763/
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
How can I disable a button until a checkbox is checked?
提问by Paranoia
I would like to have a form button disabled, until a user clicks a checkbox.
我想禁用表单按钮，直到用户单击复选框。
This is the code i have (last part of the form)
这是我的代码（表格的最后一部分）
<div class="checkbox">
<input id="check" name="checkbox" type="checkbox">
<label for="checkbox">
Some Text Here
</label>
</div>
<input type="submit" name="anmelden" class="button" id="btncheck" value="Send" />
I tried the following
我尝试了以下
$('#check').click(function(){
if($(this).attr('checked') == false){
$('#btncheck').attr("disabled","disabled");
}
else
$('#btncheck').removeAttr('disabled');
});
But this is not working and I am not sure why. I don't know how I can disable the button (should be disabled also visually).
但这不起作用，我不知道为什么。我不知道如何禁用按钮（也应该在视觉上禁用）。
Solution (thanks to Rory McCrossan): http://jsfiddle.net/0hvtgveh/
解决方案（感谢Rory McCrossan）：http: //jsfiddle.net/0hvtgveh/
回答by Rory McCrossan
Your logic is a little off, try this:
你的逻辑有点不对，试试这个：
$('#check').change(function () {
$('#btncheck').prop("disabled", !this.checked);
}).change()
Note that the UI of the button does not update when disabled, however the disabledproperty does change. You would probably want to add some CSS styling to make it obvious that the button is disabled.
请注意，按钮的 UI 在禁用时不会更新，但disabled属性会发生变化。您可能想要添加一些 CSS 样式以明确显示该按钮已禁用。
Also, I changed the code to use the changeevent instead of clickto better cater for people who navigate using the keyboard.
此外，我更改了代码以使用该change事件，而不是click更好地迎合使用键盘导航的人。
回答by Paranoia
Try with on change handler:
尝试更改处理程序：
$(function() {
var chk = $('#check');
var btn = $('#btncheck');
chk.on('change', function() {
btn.prop("disabled", !this.checked);//true: disabled, false: enabled
}).trigger('change'); //page load trigger event
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="checkbox">
<input id="check" name="checkbox" type="checkbox">
<label for="check">Some Text Here</label><!-- for must be the id of input -->
</div>
<input type="submit" name="anmelden" class="button" id="btncheck" value="Send" />回答by Sadikhasan
$('#btncheck').attr("disabled",true); //Initially disabled button when document loaded.
$('#check').click(function(){
$('#btncheck').attr("disabled",!$(this).is(":checked"));
})
When you click on checkbox
.is(":checked")return true if it is checked other wise return false. According to selection of your checkbox button it will enable/disable button.
当您单击复选框
.is(":checked")时，如果选中，则返回 true，否则返回 false。根据您选择的复选框按钮，它将启用/禁用按钮。
回答by Satpal
You need to update property, so use .prop()instead of .attr()
你需要更新属性，所以使用.prop()而不是.attr()
$('#check').click(function() {
$('#btncheck').prop("disabled", this.checked == false);
});
A Good read .prop() vs .attr()
一个很好的阅读.prop() 与 .attr()
回答by Naeem Shaikh
use if($(this ).prop( "checked" )), instead of if($(this).attr('checked') == false)
使用 if($(this ).prop( "checked" )), 而不是if($(this).attr('checked') == false)
http://jsfiddle.net/0hvtgveh/4/
http://jsfiddle.net/0hvtgveh/4/
$('#check').click(function(){
if($(this ).prop( "checked" )){
$('#btncheck').attr("disabled","disabled");
}
else
$('#btncheck').removeAttr('disabled');
});
回答by Milind Anantwar
回答by Thato Sello
That is going to need a bit of logic :
这将需要一些逻辑：
$(function(){
const button = $('#submit'); // The submit input id
button.attr('disabled', 'disabled');
$('#checkbox').change(function() { // The checkbox id
if (this.checked){
button.removeAttr('disabled')
.css("cursor", "pointer");
} else {
button.attr('disabled', 'disabled')
.css( "cursor", "not-allowed" );
}
});
});
Remember to set your css Submit Button attribute to
cursor: not-allowed;hence can disable it upon page load.
请记住将您的 css Submit Button 属性设置为
cursor: not-allowed;可以在页面加载时禁用它。
PS : This code goes to the bottom of the page. If it turns out that you have a separate file for it, do not forget to wrap it around:
PS：此代码转到页面底部。如果事实证明您有一个单独的文件，请不要忘记将其包装起来：
$(document).ready(function() {
// code goes here
});
$(document).ready(function() {
// code goes here
});
回答by themetzmeier
I believe another way to handle this problem is by using document.getElementById:
我相信另一种处理这个问题的方法是使用 document.getElementById：
if($(this).prop("checked")) {
document.getElementById('#btncheck').disabled = false;
} else {
document.getElementById('#btncheck').disabled = true;
}
