Question

我正在尝试使用jQuery动态启用/禁用表单的提交按钮。

HTML：

<form id="user-add-to-group">
  <table class="group-list">
    <tbody>
      <tr>
        <th>Voornaam</th>
        <th>Achternaam</th>
        <th>S/P-nummer</th>
        <th>Email</th>
        <th>Type</th>
      </tr>
      <tr>   
        <td>Name</td>
        <td>Surname</td>
        <td>No.</td>
        <td>email@bs.com</td>
        <td>student</td>
        <td><input type="checkbox" name="user_add_to_group[]" value="75F0CE8F-4B6F-4E17-BC7B-0B06AAD84625"></td>
      </tr>
    </tbody>
  </table>
  <button disabled="disabled" type="button" id="participant_add_btn" name="participant_add_btn" class="btn btn-primary">Add</button>                            
</form>

和jQuery：

$('table.group-list tr').on("click", function(){
  $(this).find("input[type=checkbox]").trigger('click');
    if($("#user-add-to-group input[type=checkbox]:checked").length>0){
      $("#participant_add_btn").prop("disabled","false");
    }
    else {
      $("#participant_add_btn").prop("disabled","disabled");
    }
});

我想让整个表行可单击，因此当单击tr时，jQuery会触发click事件。这有效，但我似乎无法弄清楚为什么我的按钮不会在之后启用。我想在选中表单中的任何复选框时启用它，并在没有复选框时禁用它。

如果需要更多信息，请告知我们。

Answer 1

设置属性值时，需要传递布尔参数而不是字符串。

$('#participant_add_btn').prop('disabled', false);

或使用.removeAttr("disabled")

$('#participant_add_btn').removeAttr("disabled");

单击复选框后，您的代码将无效。为此，您需要检查clicked元素的目标，如果它已经是复选框，则不要为它触发click事件：

工作代码段

$('table.group-list tr').on("click", function(e){
  if($(e.target).is(':not(:checkbox)'))
   $(this).find("input[type=checkbox]").trigger('click');
   $("#participant_add_btn").prop("disabled",$("#user-add-to-group input[type=checkbox]:checked").length == 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="user-add-to-group">
  <table class="group-list">
    <tbody>
      <tr>
        <th>Voornaam</th>
        <th>Achternaam</th>
        <th>S/P-nummer</th>
        <th>Email</th>
        <th>Type</th>
      </tr>
      <tr>   
        <td>Name</td>
        <td>Surname</td>
        <td>No.</td>
        <td>email@bs.com</td>
        <td>student</td>
        <td><input type="checkbox" name="user_add_to_group[]" value="75F0CE8F-4B6F-4E17-BC7B-0B06AAD84625"></td>
      </tr>
    </tbody>
  </table>
  <button disabled="disabled" type="button" id="participant_add_btn" name="participant_add_btn" class="btn btn-primary">Add</button>                            
</form>

Answer 2

jQuery.prop期望值为Boolean，任何非空的string都被视为true，因为它是真值

＆＃13;

$('table.group-list tr').on("click", function() {
  $(this).find("input[type=checkbox]").trigger('click');
  $("#participant_add_btn").prop("disabled", !$("#user-add-to-group input[type=checkbox]:checked").length);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="user-add-to-group">
  <table class="group-list">
    <tbody>
      <tr>
        <th>Voornaam</th>
        <th>Achternaam</th>
        <th>S/P-nummer</th>
        <th>Email</th>
        <th>Type</th>
      </tr>
      <tr>
        <td>Name</td>
        <td>Surname</td>
        <td>No.</td>
        <td>email@bs.com</td>
        <td>student</td>
        <td>
          <input type="checkbox" name="user_add_to_group[]" value="75F0CE8F-4B6F-4E17-BC7B-0B06AAD84625">
        </td>
      </tr>
    </tbody>
  </table>
  <button disabled="disabled" type="button" id="participant_add_btn" name="participant_add_btn" class="btn btn-primary">Add</button>
</form>

＆＃13;

Answer 3

$('#toggle').click(function () {
//check if checkbox is checked
if ($(this).is(':checked')) {

    $('#sendNewSms').removeAttr('disabled'); //enable input

} else {
    $('#sendNewSms').attr('disabled', true); //disable input
}

}）;

Check here.

选中表单中的任何/无复选框时启用/禁用提交按钮

3 个答案: