Флажок Bootstrap не запускает событие изменения

Question

Итак, у меня есть флажок, который я сделал с использованием методологии Bootstrap. Я пытаюсь показать или скрыть некоторые div в зависимости от того, установлен ли этот флажок. У меня есть следующий HTML:

<div class="col-lg-12"> 
       <div class="checkbox" id="partner-div"> 
        <label> 
         <input type="checkbox" id="chkPartner" /> 
         Check here if you are an Acelity partner or representative submitting a video on behalf of someone else. 
        </label> 
       </div> 
      </div> 
      <div class="form-group acelity-partner" style="display:none"> 
       <div class="col-lg-12"> 
        <label for="txtRepFirstName">Representative's First Name</label> 
        <input type="text" class="form-control" id="txtRepFirstName" placeholder="Representative's First Name'" /> 
       </div> 
      </div> 
      <div class="form-group acelity-partner" style="display:none"> 
       <div class="col-lg-12"> 
        <label for="txtRepLastName">Representative's Last Name</label> 
        <input type="text" class="form-control" id="txtRepLastName" placeholder="Representative's Last Name'" /> 
       </div> 
      </div> 
      <div class="form-group acelity-partner" style="display:none"> 
       <div class="col-lg-12"> 
        <label for="txtRepEmail">Representative's Email Address</label> 
        <input type="text" class="form-control" id="txtRepEmail" placeholder="Representative's Email Address'" /> 
       </div> 
      </div> 

И следующий JQuery внутри document.ready:

$("#chkPartner").change(function (event) { 
        if ($("#chkPartner").prop("checked")) { 
         $(".acelity-partner").show(); 
        } else { 
         $(".acelity-partner").hide(); 
        } 
       }); 

не может получить событие огонь.

Answer 1

На всякий случай кто-то сталкивается с этой очень странной проблемой, я решил ее использовать toggle(). То, что я сделал, просто создало функцию, называемую toggleRep(), и вызвала ее из onclick этого флажка. Он просто переключает видимость полей rep, как я хотел. Не знаю, почему «нормальный» способ не работает, но этот способ прекрасно работает:

<div class="col-lg-12"> 
       <div class="checkbox" id="partner-div"> 
        <label> 
         <input type="checkbox" id="chkPartner" onclick="toggleRep();" /> 
         Check here if you are an Acelity partner or representative submitting a video on behalf of someone else. 
        </label> 
       </div> 
      </div> 

и при нажатии, что вызывает эту функцию:

function toggleRep() { 
       $(".acelity-partner").toggle(); 
       if ($(".acelity-partner").is(":visible")) { 
        // do nothing 
       } else { 
        //clear fields of their values 
        $(".acelity-rep").val(""); 
       } 
      } 

Answer 2

Попробуйте использовать if ($("#chkPartner").prop("checked") == "checked"). Он может не возвращать нулевое значение, которое вы ожидаете, когда false.