フォームのチェックボックスがチェックされている場合に送信ボタンを有効/無効にする

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のクリックイベントをトリガしますので、私は、テーブル全体の行をクリック可能にしたいです。これは機能しますが、なぜ私のボタンが後で有効にならないのか分かりません。フォーム内のチェックボックスがオンになっているときに有効にしたい場合は、無効にします。

さらに詳しい情報が必要な場合は、私にお知らせください。

Answer 1

jQuery.propが

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

プロパティ値を設定するときにstringの代わりにBoolean引数を渡す必要があります。

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

かのチェックボックスをクリックするだけでは動作しません.removeAttr("disabled")

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

あなたのコードを使用します。

ワーキングスニペット：

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