Jak subskrybować zdarzenia MVC zmian wyboru w jQuery

Question

próbuję zatrzask na imprezie zmiany wyboru przy użyciu jQuery, obecnie mam to:

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

Jednak w debugowania kiedy zaznaczyć/odznaczyć pole Metoda RunsOnMondays() nie uruchamia się.

Próbowałem, używając w tym również, ale nadal nie działa:

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

wyjście Przeglądarka

<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

Powodem nie działa jest to, że to nieprawdatrue == 'true' jest faktycznie false: http://jsfiddle.net/TrueBlueAussie/2wwz1ore/6/

prop('checked') zwraca wartość logiczną! Nie ma potrzeby, aby == '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(); 
    } 
} 

Jeszcze lepiej użyć slideToggle(): http://jsfiddle.net/TrueBlueAussie/2wwz1ore/3/

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

Jeśli (a ja bardzo w to wątpię) to Twój element zostanie dodany dynamicznie, użyj delegowanego obsługi zdarzeń dołączony do nie -instrukcja przodka (document jest domyślna, jeśli nic nie jest bliższe/wygodne)

np.

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

Answer 2

Można użyć poniższy sposób następujący:

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


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

jsFiddle