ラジオボタングループを無効にする

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> 

考えiはラジオボタンBをckeck場合、ラジオボタングループサブカテゴリBが有効になっていることです。しかし、ラジオボタンをチェックすると、サブカテゴリー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関数を追加して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 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>