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

我建议用你的代码创建一个jsfiddle并提供......这将有助于快速理解问题并提供解决方案。

Answer 2

这会对你有所帮助。我更改了您的部分ID's

＆＃13;

$('#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');
})

＆＃13;

<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>

＆＃13;

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

禁用基于其他无线电盒选择的文本框

3 个答案: