表单禁用提交按钮，直到其子复选框被选中答案

【问题标题】：form disable submit button until its child checkboxes are checked表单禁用提交按钮，直到其子复选框被选中
【发布时间】：2014-07-10 22:32:45
【问题描述】：

我有一个表单，里面有多个选择框。我想禁用提交按钮，直到选中其中一个复选框。

以下解决方案有点适合我：

$(document).on('click', '#my_ids', function() {
  if($(this).prop('checked') == false){
    $('.btn').prop('disabled', true);
  }
  else {
    $('.btn').prop('disabled', false);
  }
});

但我想给表单一个“id”而不是这样，直到在表单中选中一个复选框，我想禁用提交按钮。不太确定如何以有效的方式到达那里。

这是我的表格的一种要点：

<form accept-charset="UTF-8" id= 'my-form' action="/path" class="form-stacked" method="post">
    <table>
      <thead>
        <tr>
          <th><label title="Select All/None"><input id="" name="" type="checkbox" value=
          "1" /></label></th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td><label><input id="my_ids_" name="my_ids[]" type="checkbox" value=
          "123" /></label></td>

          <td>
            <a href="/path">William</a>
          </td
        </tr>

        <tr>
          <td><label><input id="my_ids_" name="my_ids[]" type="checkbox" value=
          "25" /></label></td>
        </tr>
      </tbody>
      <button class="btn" disabled="disabled" type=
      "submit">Assign
      </button>
    </table>
</form>

【问题讨论】：

标签： javascript jquery html forms

【解决方案1】：

给您的表单一个ID。例如：id="myform" 并使用 input[type=checkbox]，如果您想从该表单中获取所有复选框。否则，也为该复选框分配一个 ID。

试试这个：

$('.btn').prop('disabled', true);
$('#myform input:checkbox').change(function () {
    var a = $('#myform input:checked').filter(":checked").length;
    if (a == 0) {
        $('.btn').prop('disabled', true);
    } else {
        $('.btn').prop('disabled', false);
    }
});

JSFiddle Demo #1

除了使用 JQuery 将按钮设置为在页面加载时禁用，您还可以使用HTML：

disabled="disabled"

JSFiddle Demo #2

【讨论】：

谢谢@imbondbaby。但是，如果页面中有多个带有复选框的表单，而我只希望这个表单具有这种行为，那么这是行不通的
啊。我不认为将表单 id 与更改功能相关联。谢谢！
您也可以使用:checkbox 简写，而不是input[type='checkbox']
已更新...谢谢！
上述解决方案存在一个小问题。如果有 2 个复选框，我选中 2，然后取消选中 1。该按钮再次被禁用。 jsfiddle.net/RQ5KY

【解决方案2】：

试试这个：

http://jsfiddle.net/HF76P/2/

JS：

$(function(){
    $('.singleCheckboxForm').each(function() {
        var form = $(this);
        form.find('input[type="checkbox"]').click(function() {
            if (form.find('input[type="checkbox"]:checked').length > 0)
            {
                form.find('input[type="submit"]').removeAttr('disabled');
            }
        });

        form.find('input[type="submit"]').attr('disabled','disabled');
    });    
});

给你要查课的表格"singleCheckboxForm"

【讨论】：