チェックボックスをクリックしたときに入力を無効/有効にするjQuery

Question

ユーザーがチェックボックスをオフにしたときにフォームの送信ボタンのみを有効にしようとしています。ボタンを無効にしてから、最初にチェックボックスをオンにすると有効になりますが、チェックボックスをオフにすると、ボタンは再び有効になりません。

HTML：

<input type="checkbox" id="waivercheck"> 
<input class="submit join-button" type="submit" value="Join Now" id="joinevent" disabled> 

スクリプト：

$(document).ready(function() { 
    $('#waivercheck').click(function(){ 
     if($(this).checked){ 
      $('#joinevent').prop("disabled",false); 
     } else { 
      $('#joinevent').prop("disabled",true); 
     } 
    }); 
}); 

誰でも助けることができますか？

Answer 1

this.checkedでチェックボックスステータスにアクセスでき、$(this).checkedではなくアクセスできます。そして、私はchangeイベントの使用をお勧めします。

$(document).ready(function() { 
    $('#waivercheck').change(function(){   
     if(this.checked){ 
      $('#joinevent').prop("disabled",false); 
     } else { 
      $('#joinevent').prop("disabled",true); 
     } 
    }); 
}); 

デモ：https://jsfiddle.net/rbnndz23/

Answer 2

あなたの問題は、条件付きです。

A jQueryオブジェクトはcheckedプロパティを持っていませんが、DOM要素自体は

代わりの

if($(this).checked) 

を行うことができない

// native element has checked property 
if(this.checked) 

それとも

// jQuery is() with pseudo selector 
if($(this).is(':checked')) 

Answer 3

$(this).checkedを使用する必要はありません。代わりにthis.checkedを試してみてください。 hereを参照してください。