disabling radiobutton group

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

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 - 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");

    }

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>