選中表單中的任何/沒有復選框時，啟用/禁用提交按鈕

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期望value為Boolean ，任何不為空的string都視為true因為它是true值

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

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

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
}

}）;

在這里檢查。