如何在选中复选框之前禁用按钮？

Question

我想禁用表单按钮，直到用户单击复选框。

这是我的代码（表格的最后一部分）

<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" />

我尝试了以下

$('#check').click(function(){

if($(this).attr('checked') == false){
     $('#btncheck').attr("disabled","disabled");   
}
else
    $('#btncheck').removeAttr('disabled');
});

但这不起作用，我不知道为什么。 我不知道如何禁用按钮（也应该在视觉上禁用）。

解决方案（感谢Rory McCrossan ）： http : //jsfiddle.net/0hvtgveh/

Answer 1

你的逻辑有点不对，试试这个：

$('#check').change(function () {
    $('#btncheck').prop("disabled", !this.checked);
}).change()

更新的小提琴

请注意，按钮的 UI 在禁用时不会更新，但是disabled属性会发生变化。 您可能想要添加一些 CSS 样式以明确显示该按钮已禁用。

此外，我更改了代码以使用change事件而不是click以更好地满足使用键盘导航的人的需求。

Answer 2

尝试更改处理程序：

 $(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" />

Answer 3

你需要更新属性，所以使用.prop()而不是.attr()

$('#check').click(function() {
    $('#btncheck').prop("disabled", this.checked == false);
});

一个很好的阅读.prop() 与 .attr()

Answer 4

$('#btncheck').attr("disabled",true);  //Initially disabled button when document loaded.
$('#check').click(function(){
    $('#btncheck').attr("disabled",!$(this).is(":checked"));   
})

当您单击复选框时，如果选中.is(":checked")返回 true，否则返回 false。 根据您选择的复选框按钮，它将启用/禁用按钮。

演示

Answer 5

if statement.use 中的条件不正确：

$('#check').click(function(){
 if(!$(this).is(':checked')){
    $('#btncheck').attr("disabled","disabled");   
 }else
    $('#btncheck').removeAttr('disabled');
 });

演示

Answer 6

使用if($(this ).prop( "checked" )) ，而不是if($(this).attr('checked') == false)

http://jsfiddle.net/0hvtgveh/4/

$('#check').click(function(){

if($(this ).prop( "checked" )){
     $('#btncheck').attr("disabled","disabled");   
}
else
    $('#btncheck').removeAttr('disabled');
});

Answer 7

这将需要一些逻辑：

   $(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" );
          }
      });
  });

请记住将您的 css Submit Button 属性设置为cursor: not-allowed; 因此可以在页面加载时禁用它。

PS：此代码转到页面底部。 如果事实证明您有一个单独的文件，请不要忘记将其包装起来：

$(document).ready(function() { // code goes here });

Answer 8

我相信处理这个问题的另一种方法是使用 document.getElementById：

if($(this).prop("checked")) {
    document.getElementById('#btncheck').disabled = false;
} else {
    document.getElementById('#btncheck').disabled = true;
}