初めてチェックボックスのクリックイベントを非表示にして表示することができません

Question

チェックボックスのチェックされた条件に基づいて、チェックボックスのクリックイベントを表示および非表示にしようとしています。しかし、初めて要素を表示したり隠したりすることができませんでした。同じスクリプトは、クリックイベントが発生したときに2回目に機能します。スクリプトは次のとおりです。

$(document).on("click", ".check-now-checkbox", function() { 
       if($(this).prop('checked')===true){ 
       $("#Password").show(); 
        $("#save_password").show(); 
         $("#Role").removeClass("show-pwd"); 
        } 
       else{ 
        $("#Password").hide() 
        $("#save_password").hide(); 

         $("#Role").addClass("show-pwd"); 
       } 
      }); 

上記のスクリプトのHtmlコードは次のとおりです。

<div class="password"><div class="row server-inputs" id="Password"> 
<div class="input-field col s12"> 
<input id="password" type="password" class="validate" required="" aria-required="true" name="password" maxlength="255" value=""> 
<label name="password" data-error="This field is required" data-success="" for="Password">Password</label> 
</div> 
</div></div> 
<div class="save_password"><div class="row server-inputs" id="save_password"> 
<div class="input-field col s12"> 
<input type="checkbox" class="filled-in check-now-checkbox" name="save_password" id="Save password?" checked="checked" style="cursor:pointer"> 
<label for="Save password?" style="margin-top: -35px;cursor: pointer;">Save password?</label> 
</div> 
</div></div> 

問題を解決する方法を教えてください。前もって感謝します。

Answer 1

「div＃save_password」を非表示にする必要はありません。チェックボックスでchangeイベントを使用するのではなく、をクリックします。

$(document).on("change", ".check-now-checkbox", function() { 
 
       if($(this).prop('checked')===true){ 
 
       $("#Password").show(); 
 
         $("#Role").removeClass("show-pwd"); 
 
        } 
 
       else{ 
 
        $("#Password").hide() 
 
         $("#Role").addClass("show-pwd"); 
 
       } 
 
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="password"> 
 
    <div class="row server-inputs" id="Password"> 
 
     <div class="input-field col s12"> 
 
      <input id="password" type="password" class="validate" required="" aria-required="true" name="password" maxlength="255" value=""> 
 
      <label name="password" data-error="This field is required" data-success="" for="Password">Password</label> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="save_password"> 
 
    <div class="row server-inputs" id="save_password"> 
 
     <div class="input-field col s12"> 
 
      <input type="checkbox" class="filled-in check-now-checkbox" name="save_password" id="Save password?" checked="checked" style="cursor:pointer"> 
 
      <label for="Save password?" style="margin-top: -35px;cursor: pointer;">Save password?</label> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

この

$(".check-now-checkbox").click(function(){ 
    If($(this).is(":checked")){ 
     $("#Password").show(); 
     $("#save_password").show(); 
     $("#Role").removeClass("show-pwd"); 
    } 
else{ 
     $("#Password").hide() 
     $("#save_password").hide(); 
     $("#Role").addClass("show-pwd"); 
} 

}); 

をお試しください