禁用单选按钮组

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> 

的想法是，当我ckeck单选按钮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函数，并调用它褪色和禁用或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>