javascript - disabling radiobutton group - Stack Overflow

admin管理员组

文章数量:1406064

i have radiobutton groups and subgroups. What i want to achieve is to unable the subgroup when the main group radiobutton is selected, and when other group is selected, disable the subgroup and unchek all radiobuttons of the subgroup.

heres an example:

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

the idea is that when i ckeck radio button b, the radio button group subcategory b is enabled. But if i then check radio buttons a or c, subcategoryb should be disabled and uncheked

The idea is to disable - unchek or enable the whole sub group, not to manually disable radiobuttons where values are 1 , 2, or 3, since the radiobuttons are constructed on demand

i have radiobutton groups and subgroups. What i want to achieve is to unable the subgroup when the main group radiobutton is selected, and when other group is selected, disable the subgroup and unchek all radiobuttons of the subgroup.

heres an example:

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

the idea is that when i ckeck radio button b, the radio button group subcategory b is enabled. But if i then check radio buttons a or c, subcategoryb should be disabled and uncheked

The idea is to disable - unchek or enable the whole sub group, not to manually disable radiobuttons where values are 1 , 2, or 3, since the radiobuttons are constructed on demand

• javascript
• jquery
• radio-button

Share Improve this question Follow edited Jan 25, 2011 at 11:45 chelmertz 20.6k55 gold badges4242 silver badges4646 bronze badges asked Jan 24, 2011 at 16:40 Dan SternDan Stern 2,15788 gold badges2626 silver badges3939 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

Since you tagged the question with jQuery I'll assume I can use jQuery in this solution.

$('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'); 
    } 
});

Edit: small forgot a quote and the unchecking

       <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

---

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

That should work with your code. However I'd prefer to use a class, or to put my inputs in different fieldsets - which makes sense here.

If you plan ahead you can name your inputs xxx and name your labels that are associated with those inputs "xxxLabel"... then you can add a jquery function and call it to Fade and Disable or UnFade and Enable...

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

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

    var ctfArray = controlToFadeList.split(','); // split on mas
    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 - ma separated list of controls

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

    var ctfArray = controlToFadeList.split(','); // split on mas
    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");

    }

Try this:

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

本文标签： javascriptdisabling radiobutton groupStack Overflow