yii 中的 jquery：检测单选按钮丢失复选标记（选中状态）

Question

给定以下代码（是的，我知道它在 yii 中可能无关紧要，但我添加了标签，所以我用实际生成的 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>

当收音机未被选中时，它不会触发 change()。这意味着：仅在初始化 (.ready()) 时禁用控件。 change() 不会由失去复选标记的控件单独触发。

问题：如何检测单选按钮何时丢失复选标记？

Answer 1

这是一个概念问题。单选按钮看起来像是一个元素。有关详细信息，请查看Why does jQuery .change() not fire on radio buttons deselected as a result of a namesake being selected?。
因此更改事件将始终仅在新选择的元素上触发，而不是在取消选择的收音机上触发。你可以像这样修复你的代码：

$(function(){
    $('#widgetId-form input[name="valueType"]').change(function(){
        //could be also 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();
});

您可以通过http://jsfiddle.net/jg6CC/查看。迎接另一个 Luis M. ;)