禁用單選按鈕組

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>