отключение группы радиокнопок

Question

у меня есть группы и подгруппы радиокнопок. Чего я хочу добиться, так это отключить подгруппу, когда выбрана радиопереключатель основной группы, и когда выбрана другая группа, отключить подгруппу и снять все радиокнопки подгруппы.

вот пример:

<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, подкатегория должна быть отключена и не отмечена

Идея состоит в том, чтобы отключить - снять флажок или включить всю подгруппу, а не вручную отключать радиокнопки, значения которых равны 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'); 
    } 
});

Редактировать: small забыл цитату и снял отметку

Answer 2

Попробуйте это:

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

Answer 3

Если вы планируете заранее, вы можете назвать свои входы xxx и назвать свои ярлыки, которые связаны с этими входами, «xxxLabel» ... тогда вы можете добавить функцию jquery и вызывать ее для Fade and Disable или 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");

    }

Answer 4

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

Это должно работать с вашим кодом.Однако я бы предпочел использовать класс или поместить свои входные данные в разные наборы полей - что здесь имеет смысл.

Answer 5

       <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

---