Блог

У меня есть две переключатели, при активном включении каждая кнопка радио будет охватывать два текстовых поля. Теперь, когда я выбираю первый переключатель, два текстовых поля другого переключателя должны быть отключены, и наоборот, может кто-нибудь помочь мне в этом, я новичок в 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 amp; 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>amp;nbsp;</span><input type="submit" value="Next" /><input type="reset" value="Reset"></label>
 

Я бы предложил создать jsfiddle с вашим кодом и предоставить… Это поможет быстро понять проблему и предложить решение.

Это поможет вам. Я изменяю некоторые из ваших 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 amp; 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>amp;nbsp;</span><input type="submit" value="Next" /><input type="reset" value="Reset"></label> 

Я думаю, вы можете попробовать это решение, оно не является оптимальным, но оно работает.

 //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, консоль, вывод