Wie einer MVC-Checkbox Änderungsereignis in JQUERY

Question

Ich versuche, klammern sich an ein Kontrollkästchen Änderungsereignis mit jQuery, zur Zeit habe ich diese abonnieren:

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

jedoch in Debug, wenn ich check/deaktivieren Sie das Kästchen Die RunsOnMondays() Methode wird nicht ausgelöst.

Ich habe auch versucht, dies mit aber die Arbeit immer noch nicht:

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

Browser Ausgabe

<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

Der Grund ist es nicht der Fall funktioniert, dass diese nicht wahr ist true == 'true' ist eigentlich false: http://jsfiddle.net/TrueBlueAussie/2wwz1ore/6/

prop('checked') gibt einen booleschen Wert zurück! Keine Notwendigkeit für == '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(); 
    } 
} 

Noch besser wäre es, verwenden slideToggle(): http://jsfiddle.net/TrueBlueAussie/2wwz1ore/3/

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

Wenn (und ich bezweifle sehr, es) Ihr Element dynamisch hinzugefügt, einen delegierten Event-Handler zu einem nicht angebracht verwenden -change Vorfahrenelement (document ist die Standardeinstellung, wenn nichts anderes näher/bequem ist)

z

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

Answer 2

Sie könnten die unten wie folgt verwenden:

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


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

jsFiddle