Как подписаться на событие изменения Флажка MVC в Jquery

Question

Я пытаюсь зацепить события изменений флажка с помощью JQuery, в настоящее время у меня есть это:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.timepicker').datetimepicker({ datepicker: false, format: 'H:i' }); 
     $('.mondaystartfinish').hide(); 

     //subscribe to change events 
     $('#IsMonday').change(function() { 
      RunsOnMondays(); 
     }); 
    }); 

    function RunsOnMondays() { 
     if ($('#IsMonday').prop('checked') == 'true') { 
      $('.mondaystartfinish').slideDown(); 
     } else { 
      $('.mondaystartfinish').slideUp(); 
     } 
    }  
</script> 

Однако в отладке, когда я проверяю/снимите флажок метод RunsOnMondays() не стреляет.

Я попытался использовать это тоже, но по-прежнему не работает:

$('IsMonday').prop('checked').change(function() { RunsOnMondays();}); 

выход Browser

<div class="form-group"> 
    <label class="control-label col-md-2" for="IsMonday">Monday</label> 
    <div class="col-md-10"> 
     <input class="check-box" data-val="true" data-val-required="The IsMonday field is required." id="IsMonday" name="IsMonday" type="checkbox" value="true" /><input name="IsMonday" type="hidden" value="false" /> 
     <span class="field-validation-valid" data-valmsg-for="IsMonday" data-valmsg-replace="true"></span> 
    </div> 
</div> 

<div class="startfinish"> 
    <div class="form-group"> 
     <div class="mondaystartfinish"> 
      <label class="control-label col-md-2" for="MondayFrom">Monday Start</label> 
      <div class="col-md-10"> 
       <input class="timepicker" data-val="true" data-val-date="The field MondayFrom must be a date." id="MondayFrom" name="MondayFrom" type="text" value="" /> 
       <span class="field-validation-valid" data-valmsg-for="MondayFrom" data-valmsg-replace="true"></span> 
      </div> 
     </div> 
    </div> 
</div> 

<div class="startfinish"> 
    <div class="form-group"> 
     <div class="mondaystartfinish"> 
      <label class="control-label col-md-2" for="MondayTo">Monday Finish</label> 
      <div class="col-md-10"> 
       <input class="timepicker" data-val="true" data-val-date="The field MondayTo must be a date." id="MondayTo" name="MondayTo" type="text" value="" /> 
       <span class="field-validation-valid" data-valmsg-for="MondayTo" data-valmsg-replace="true"></span> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Причина, по которой не работает, что это не такtrue == 'true' на самом деле false: http://jsfiddle.net/TrueBlueAussie/2wwz1ore/6/

prop('checked') возвращает логическое значение! Нет необходимости в == 'true'.

http://jsfiddle.net/TrueBlueAussie/2wwz1ore/1/

$(document).ready(function() { 
    //$('.timepicker').datetimepicker({ datepicker: false, format: 'H:i' }); 
    $('.mondaystartfinish').hide(); 

    // subscribe to change events 
    $('#IsMonday').change(function() { 
     RunsOnMondays(); 
    }); 
}); 

function RunsOnMondays() { 
    if ($('#IsMonday').prop('checked')) { 
     $('.mondaystartfinish').slideDown(); 
    } else { 
     $('.mondaystartfinish').slideUp(); 
    } 
} 

Еще лучше использовать slideToggle(): http://jsfiddle.net/TrueBlueAussie/2wwz1ore/3/

// subscribe to change events 
    $('#IsMonday').change(function() { 
     $('.mondaystartfinish').slideToggle($(this).prop('checked')); 
    }); 

Если (и я очень сомневаюсь) ваш элемент добавляется динамически, используйте делегированного обработчик события к не -обменный элемент предка (document по умолчанию, если ничего больше не ближе/удобнее)

eg

$(document).on('click' , '#IsMonday', function() { 
     $('.mondaystartfinish').slideToggle($(this).prop('checked')); 
    }); 

Answer 2

Вы можете использовать ниже следующим образом:

$('#IsMonday').change(function(){ 
    RunsOnMondays(this.checked); 
}); 


function RunsOnMondays(isChecked) { 
    if (isChecked) { 
     $('.mondaystartfinish').slideDown(); 
    } else { 
     $('.mondaystartfinish').slideUp(); 
    } 
} 

jsFiddle