Question

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

以下解决方案对我有用：

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

Answer 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

您可以使用HTML：

而不是使用JQuery将按钮设置为在页面加载时禁用

disabled="disabled"

<强> JSFiddle Demo #2

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

的表单

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

2 个答案: