다른 라디오 상자 선택에 따라 텍스트 상자 사용 안 함

Question

두 개의 라디오 단추가 활성화되어 있으며 각 라디오 단추는 두 개의 텍스트 상자로 확장됩니다. JS

아래는 HTML

<div class=radio_section> 
    <br></br> 
      <input type="radio" name="etime6.0" id="etime6.0-6.1" required> 
      <dev class="labelv"> 
      <label for="etime6.0-dogs">ETIME source client 6.0 & 6.1 </label> 
      </dev> 
      <div class="reveal-if-active"> 
        <label for="field1"><span class=text>Enter the Source DB Name<span class="required">*</span></span> 
        <input id="db" type="text" maxlength="8" pattern="(^((et.)|(Et.)|(ET.)).+)|(.{3}([eEtT]$))" title="Database Name starts with et (or) Ends with e or t minimum of 4 letters" class="input-field" name="database_name" value="" /></label> 
            <label for="field1"><span class=text>Enter Target Client name<span class="required">*</span></span> 
            <input id="client" type="text" class="input-field" maxlength="3" pattern=".{3,}" title="3 characters minimum" class="input-field" name="Client_name" value=""/></label> 
      </div> 
     </div> 
    <div class=radio_section> 
      <input type="radio" name="etime6.0" id="etime6.2"> 
      <dev class="labelv"> 
      <label for="etime6.0-cats">ETIME Source Client above 6.1</label> 
      </dev> 
      <div class="reveal-if-active"> 
      <label for="which-cat"></label> 
        <label for="field1"><span class=text>Enter source client name<span class="required">*</span></span> 
        <input id="client1" type="text" class="input-field" maxlength="3" pattern=".{3,}" title="3 characters minimum" class="input-field" name="Client_name1" value=""/></label> 
            <label for="field1"><span class=text>Enter Target Client name<span class="required">*</span></span> 
            <input id="client" type="text" class="input-field" maxlength="3" pattern=".{3,}" title="3 characters minimum" class="input-field" name="Client_namei2" value=""/></label> 
      </div> 
     </div> 
    <dev class="submit"> 
    <label><span>&nbsp;</span><input type="submit" value="Next" /><input type="reset" value="Reset"></label> 

Answer 1

I입니다에 내가 첫 번째 라디오 버튼을 선택하면 지금, 다른 무선 buttion의 두 텍스트 상자가 비활성화되어야하고, 그 반대의 경우도 마찬가지 사람이 나를 도울 수있다, 나는 새로운 해요 귀하의 코드로 jsfiddle을 생성하고 제안하는 것이 좋습니다 ... 이것은 신속하게 문제를 이해하고 해결책을 제공하는 데 도움이됩니다.

Answer 2

도움이 될 것입니다. 나는 ID's

$('#rd1').click(function(){ 
 
$("#rd1").removeAttr('disabled'); 
 
$("#db").removeAttr('disabled'); 
 
$("#client").removeAttr('disabled'); 
 
$("#client1").attr('disabled',true); 
 
$("#clientname").attr('disabled',true); 
 
}) 
 
$('#rd2').click(function(){ 
 
$("#db").attr('disabled',true); 
 
$("#client").attr('disabled',true); 
 
$("#client1").removeAttr('disabled'); 
 
$("#clientname").removeAttr('disabled'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class=radio_section> 
 
    <br></br> 
 
      <input type="radio" name="etime6.0" id="rd1" required> 
 
      <dev class="labelv"> 
 
      <label for="etime6.0-dogs">ETIME source client 6.0 & 6.1 </label> 
 
      </dev> 
 
      <div class="reveal-if-active"> 
 
        <label for="field1"><span class=text>Enter the Source DB Name<span class="required">*</span></span> 
 
        <input id="db" type="text" maxlength="8" pattern="(^((et.)|(Et.)|(ET.)).+)|(.{3}([eEtT]$))" title="Database Name starts with et (or) Ends with e or t minimum of 4 letters" class="input-field" name="database_name" value="" /></label> 
 
             <label for="field1"><span class=text>Enter Target Client name<span class="required">*</span></span> 
 
            <input id="client" type="text" class="input-field" maxlength="3" pattern=".{3,}" title="3 characters minimum" class="input-field" name="Client_name" value=""/></label> 
 
      </div> 
 
     </div> 
 
    <div class=radio_section> 
 
      <input type="radio" name="etime6.0" id="rd2"> 
 
      <dev class="labelv"> 
 
      <label for="etime6.0-cats">ETIME Source Client above 6.1</label> 
 
      </dev> 
 
      <div class="reveal-if-active"> 
 
      <label for="which-cat"></label> 
 
        <label for="field1"><span class=text>Enter source client name<span class="required">*</span></span> 
 
        <input id="client1" type="text" class="input-field" maxlength="3" pattern=".{3,}" title="3 characters minimum" class="input-field" name="Client_name1" value=""/></label> 
 
            <label for="field1"><span class=text>Enter Target Client name<span class="required">*</span></span> 
 
            <input id="clientname" type="text" class="input-field" maxlength="3" pattern=".{3,}" title="3 characters minimum" class="input-field" name="Client_namei2" value=""/></label> 
 
      </div> 
 
     </div> 
 
    <dev class="submit"> 
 
    <label><span>&nbsp;</span><input type="submit" value="Next" /><input type="reset" value="Reset"></label>

Answer 3

나는 당신이이 솔루션을 시도 할 생각이 최적이 아니다 당신의 일부를 변경할 수 있지만 그것은 작동합니다.

//Getting all the radio elements 
var radios = document.getElementsByName('etime6.0'); 

//Iterating though all the elements to add click event listner 
for(var i = 0; i < radios.length; ++i){ 
    radios[i].addEventListener('click',function(){ 

     //Making all the input text not disabled for every time to refresh the state 
     var allInputFields = document.querySelectorAll('input[type="text"]'); 
     [].forEach.call(allInputFields, function(input) { 

       input.disabled = false; 
      }); 

     //Checking which radio is not checked 
     for(var i = 0; i<radios.length; i++){ 
     if(!radios[i].checked){ 

      //Getting all the input[type="text"] for unchecked radio button 
      var inputFields = radios[i].parentElement.querySelectorAll('input[type="text"]'); 


      [].forEach.call(inputFields, function(input) { 

       input.disabled = true; 
      }); 
     } 
     } 
    }); 

} 

http://jsbin.com/jofupolaqa/1/edit?html,js,console,output