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

I have a form which has multiple select boxes inside it. I wanted to disable the submit button until one of the checbox is checked.

我有一个表格里面有多个选择框。我想禁用提交按钮,直到选中其中一个checbox。

The following solution kinda works for me:

以下解决方案对我有用:

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

But instead of that I want to give the form an 'id' and until one of the checkbox is checked inside the form I want to disable the submit button. Not very sure how to get there in an efficient way.

但我没有想要给表单一个'id',直到在表单中检查了一个复选框,我想禁用提交按钮。不太确定如何以有效的方式到达那里。

Here is a kind of a gist of my form:

这是我的形式的一个要点:

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

2 个解决方案

#1

Give your form an ID. For example: id="myform" and use input[type=checkbox], if you want to get all the checkboxes from that form. Otherwise, assign that checkbox an ID as well.

为您的表单提供ID。例如:id =“myform”并使用输入[type = checkbox],如果您想从该表单中获取所有复选框。否则,也为该复选框指定一个ID。

Try this:

$('.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

JSFiddle演示#1

Instead of using JQuery to set the button to disabled on page load, you can also use HTML:

您也可以使用HTML,而不是使用JQuery在页面加载时将按钮设置为禁用:

disabled="disabled"

JSFiddle Demo #2

JSFiddle演示#2

#2

Try this:

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');
    });    
});

Give the form you want to check the class "singleCheckboxForm"

提供您要检查类“singleCheckboxForm”的表单