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()

Updated fiddle

请注意，禁用时按钮的UI不会更新，但disabled属性确实会更改。你可能想要添加一些CSS样式，以明确按钮被禁用。

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

Answer 2

尝试使用更改处理程序：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您需要更新属性，因此请使用.prop()代替.attr()

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

好读.prop() vs .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。根据您选中的复选框按钮，它将启用/禁用按钮。

<强> Demo

Answer 5

if statement.use：

中的条件不正确

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

<强> Demo

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提交按钮属性设置为cursor: not-allowed;，因此可以在页面加载时禁用它。

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

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

Answer 8

我认为处理此问题的另一种方法是使用document.getElementById：

    {
      "type": "node",
      "request": "launch",
      "name": "Node: Launch via NPM",
      "runtimeExecutable": "npm",
      "runtimeArgs": [
        "run-script",
        "debug",
        "--preserve-symlinks",
        "--preserve-symlinks-main"
      ],
      "port": 9229,
      "skipFiles": ["<node_internals>/**"]
    }

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

8 个答案: