他のラジオボックスの選択に基づいてテキストボックスを無効にする

Question

2つのラジオボタンがあり、それぞれのラジオボタンは2つのテキストボックスにまたがります。 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の2つのテキストボックスを無効にする必要があり、またその逆 は、誰かがこの上で私を助けることができる、私は新たなんですあなたのコードで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