Question

我有radiobutton组和子组。我想要实现的是当选择主组radiobutton时无法使用子组，并且当选择其他组时，禁用子组并取消选中子组的所有单选按钮。

以下是一个例子：

<form name='nameForm'>
<input name='category' type='radio' value='a' >
<input name='category' type='radio' value='b' >
           <input name='subcategory_b' type='radio' disabled value='1' >
           <input name='subcategory_b' type='radio' disabled value='2' >
           <input name='subcategory_b' type='radio' disabled value='3' >
<input name='category' type='radio' value='c' >
</form>

这个想法是当我点击单选按钮b时，单选按钮组子类别b被启用。但是，如果我然后检查单选按钮a或c，则应禁用子类别b并取消选中

这个想法是禁用 - 取消选中或启用整个子组，而不是手动禁用值为1,2或3的无线电按钮，因为无线电按钮是按需构建的

Answer 1

由于您使用jQuery标记了问题，我假设我可以在此解决方案中使用jQuery。

$('input[name=category]').change(function () { 
    if(this.value != 'b'){ 
        $('input[name=subcategory_b]')
            .attr('disabled', 'disabled').attr('checked', false); 
    } else { 
        $('input[name=subcategory_b]').removeAttr('disabled'); 
    } 
});

编辑：小忘了引用和取消选中

Answer 2

       <form name='nameForm'>
        <input name='category' type='radio' value='a' >
        <input name='category' type='radio' id="categoryB" value='b' onclick="updateRadio();" onchange="updateRadio()">
                   <input name='subcategory_b' type='radio' disabled value='1' >
                   <input name='subcategory_b' type='radio' disabled value='2' >
                   <input name='subcategory_b' type='radio' disabled value='3' >
        <input name='category' type='radio' value='c' >
        </form>
        <script>
        function updateRadio(){
        var state = document.getElementById('categoryB').checked;
        var bs = document.getElementsByName('subcategory_b');
        for(var i=0; i<bs.length; i++)bs[i].disabled=!state;
}
        </script>c

Answer 3

<input name='category' type='radio' value='b' onclick='
  $("input[name^=subcategory]").attr("disabled", "disabled");
  $("input[name=subcategory_"+$(this).val()+"]").removeAttr("disabled");
' />

这应该适用于您的代码。但是我更喜欢使用一个类，或者将我的输入放在不同的字段集中 - 这在这里是有道理的。

Answer 4

如果您提前计划，您可以命名您的输入xxx并命名与这些输入“xxxLabel”相关联的标签...然后您可以添加一个jquery函数并将其命名为Fade and Disable或UnFade并启用...

// fade and disable an array of controls - comma separated list of controls

function fadeAndDisable(controlToFadeList) {
    var ctfControl = "";
    var ctfLabel = "";

    var ctfArray = controlToFadeList.split(','); // split on commas
    var q = ctfArray.length;

    for (i = 0; i < q; i++) {

        ctfControl = "#" + ctfArray[i];
        ctfLabel = "#" + ctfArray[i] + "Label";

        $(ctfLabel).fadeTo("fast", 0.25);
        $(ctfControl).fadeTo("fast", 0.25);
        $(ctfControl).attr("disabled", "disabled");

    }

}

// fade and disable an array of controls - comma separated list of controls

function unfadeAndEnable(controlToFadeList) {
    var ctfControl = "";
    var ctfLabel = "";

    var ctfArray = controlToFadeList.split(','); // split on commas
    var q = ctfArray.length;

    for (i = 0; i <  q; i++) {
        ctfControl = "#" + ctfArray[i];
        ctfLabel = "#" + ctfArray[i] + "Label";

        $(ctfLabel).fadeTo("fast", 1);
        $(ctfControl).fadeTo("fast", 1);
        $(ctfControl).removeAttr("disabled");

    }

Answer 5

试试这个：

<script type="text/javascript">  
    $(function(){
        $("[name=category]").click(function(){
            var val  = this.value;
            var checked = this.checked;
            if(val == "b"){
                $("[name=subcategory_" + val + "]").attr("checked", checked).attr("disabled", (checked)?"":"disabled");
            }
        });
    });
</script>

禁用单选按钮组

5 个答案: