CODEWITHSUNDEEP
javascriptjqueryradio-button
Dan Stern
Dan Stern

Reputation: 2167

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

Upvotes: 2

Views: 10608

Answers (5)

Exelian
Exelian

Reputation: 5888

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

Upvotes: 1

Chandu
Chandu

Reputation: 82893

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>

Upvotes: 0

John K.
John K.

Reputation: 5474

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

    }

Upvotes: 0

Nabab
Nabab

Reputation: 2644

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

Upvotes: 0

Mano Kovacs
Mano Kovacs

Reputation: 1514

       <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

Upvotes: 0

Related Questions