javascript - jquery in yii: Detecting radiobutton losing check mark (checked state) -
given following code (yes, know perhaps irrelevant in yii, added tag update question actual generated html):
<script> $(function(){ $('#widgetid-form input[name="valuetype"]').change(function(){ if ($(this).is(":checked")) { console.log("habilitando "+$(this).data("class")); $("."+$(this).data("class")).prop("disabled", false); } else { console.log("deshabilitando "+$(this).data("class")); $("."+$(this).data("class")).prop("disabled", true); } }).change(); }); </script> <div id="widgetid-dialog"> <form id="widgetid-form" action="/support/test" method="post"> <div> <input id="valuetype-single" value="single" data-class="singlevaluefield" checked="checked" type="radio" name="valuetype" /> <label for="single">valor simple</label> <input size="6" class="singlevaluefield" type="text" value="" name="singlevalue" id="singlevalue" /> </div> <div> <input id="valuetype-range" value="range" data-class="rangevaluefield" type="radio" name="valuetype" /> <label for="range">rango (inicio:fin:intervalo)</label> <input size="6" class="rangevaluefield" type="text" value="" name="rangevalue_start" id="rangevalue_start" />:<input size="6" class="rangevaluefield" type="text" value="" name="rangevalue_end" id="rangevalue_end" />:<input size="6" class="rangevaluefield" type="text" value="" name="rangevalue_interval" id="rangevalue_interval" /> </div> </form> </div>
it doesn't trigger change() when radio becomes unchecked. implies: controls disabled only on initialization (.ready()). change() not triggered individually controls losing checkmark.
question: how can detect when radio button loses checkmark?
this conceptional problem. radio buttons seen somehow 1 element. closer information @ why jquery .change() not fire on radio buttons deselected result of namesake being selected?.
change-event fire on newly selected element , not on deselected radios. fix code this:
$(function(){ $('#widgetid-form input[name="valuetype"]').change(function(){ //could hardcoded : $('input[name="' + $(this).attr("name") + '"]').each(function(){ if ($(this).is(":checked")) { console.log("habilitando "+$(this).data("class")); $("."+$(this).data("class")).prop("disabled", false); } else { console.log("deshabilitando "+$(this).data("class")); $("."+$(this).data("class")).prop("disabled", true); } }); }); $('#widgetid-form input[name="valuetype"]:first').change(); });
you can check @ http://jsfiddle.net/jg6cc/. greets luis m. ;)
Comments
Post a Comment