Làm thế nào để đăng ký một sự kiện thay đổi hộp kiểm MVC trong jQuery

Question

Tôi đang cố gắng bám vào một sự kiện thay đổi checkbox sử dụng jQuery, hiện nay tôi có điều này:

<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> 

Tuy nhiên trong debug khi tôi kiểm tra/bỏ chọn hộp phương pháp RunsOnMondays() không kích hoạt.

Tôi đã cố gắng sử dụng này cũng nhưng vẫn không làm việc:

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

đầu ra trình duyệt

<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

Lý do nó không hoạt động là này là không đúng sự thậttrue == 'true' thực sự là false: http://jsfiddle.net/TrueBlueAussie/2wwz1ore/6/

prop('checked') trả về giá trị boolean! Không cần == '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(); 
    } 
} 

Hơn thế nữa, sử dụng slideToggle(): http://jsfiddle.net/TrueBlueAussie/2wwz1ore/3/

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

Nếu (và tôi rất nghi ngờ nó) yếu tố của bạn được thêm tự động, sử dụng một trình xử lý sự kiện được giao gắn liền với một tổ chức phi -Thay đổi phần tử tổ tiên (document là mặc định nếu không có gì khác gần hơn/thuận tiện)

ví dụ

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

Answer 2

Bạn có thể sử dụng dưới đây như sau:

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


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

jsFiddle