라디오 버튼 그룹 비활성화

Question

라디오 버튼 그룹과 하위 그룹이 있습니다. 내가 원하는 것은 기본 그룹 라디오 버튼을 선택했을 때 하위 그룹을 선택하지 못하게하고 다른 그룹을 선택하면 하위 그룹을 비활성화하고 하위 그룹의 모든 라디오 버튼을 선택 취소합니다. 예를 heres

:

<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)가 설정되어 있다는 점이다. 하지만 라디오 버튼을 체크하거나 라디오 버튼을 체크하면 subcategoryb가 비활성화되고 선택 해제되어야합니다.

아이디어는 모든 하위 그룹의 선택을 해제하거나 활성화하고 값이 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 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>