用户只能在其中一个输入的多输入

Question

考虑一个有很多输入的表单，每个输入都有一个与它们关联的单选按钮。用户选择收音机并显示相关的输入。

http://jsfiddle.net/0uL6zzja/

如果投入增加（例如15），我们将结束大量的样板代码中所有单选按钮的JS（他们都做同样的事情的数量，禁用其他输入，使我的输入）

的JS是：

$('#precentRadio').change(function() { 
    $("#dolorsInput").attr("disabled", true); 
    $("#precentInput").attr("disabled", false); 
}) 
$('#dolorsRadio').change(function() { 
    $("#precentInput").attr("disabled", true); 
    $("#dolorsInput").attr("disabled", false); 
}) 

还有什么办法可以可以最大限度地减少代码？！

Answer 1

Working demo

使用一个类名触发输入禁用/启用按钮，并输入一个类名。全部禁用它们，并通过从单击按钮遍历到最近的.input-group，然后返回到输入字段来启用所需的一个。

的jQuery（这是所有）

$('.some-button').change(function() { 
    $('.some-input').prop("disabled", true); 
    $(this).closest('.input-group').find('.some-input').prop("disabled", false); 
}) 

HTML

Please enter amount in "$" or "%":<p/> 
<div class="col-sm-4"> 
    <div class="input-group"> 
     <span class="input-group-addon"> 
       <input name="switched" checked="checked" type="radio" class="some-button"> 
     </span> 
     <div class="input-group input-group-applyed-input-manager"> 
      <span class="input-group-addon">$</span> 
      <input class="form-control some-input" type="text" > 
     </div> 
    </div> 
</div> 

<div class="col-sm-4"> 
    <div class="input-group"> 
     <span class="input-group-addon"> 
       <input name="switched" type="radio" class="some-button"> 
     </span> 
     <div class="input-group input-group-applyed-input-manager"> 
      <span class="input-group-addon">%</span> 
      <input class="form-control some-input" type="text" disabled> 
     </div> 
    </div> 
</div> 

(repeat) 

而且disabled="true"是不正确的，这不是在HTML一个布尔值，它要么存在或不存在，你也应该禁用.prop()而不是attr()。

Answer 2

你可以添加一个普通的类到你的单选按钮并附加一个单独的事件给他们。从那里你可以使用DOM遍历来只改变相关的文本输入。事情是这样的：

<div class="col-sm-4"> 
    <div class="input-group"> 
     <span class="input-group-addon"> 
      <input name="switched" class="input-toggle" checked="checked" type="radio" /> 
     </span> 
     <div class="input-group input-group-applyed-input-manager"> 
      <span class="input-group-addon">$</span> 
      <input class="form-control" type="text" /> 
     </div> 
    </div> 
</div> 

$('.input-toggle').change(function() { 
    $('.input-group input[type="text"]').prop('disabled', true); // disable all 
    $(this).closest('.input-group').find('input[type="text"]').prop('disabled', false); 
}); 

Example fiddle

Answer 3

当然。将单选按钮与类似功能相关联的正确方法是使用公用的name而不是class。这使得单选按钮相互排斥（因此组中只有一个选项可以同时激活）。

然后，将jQuery .change处理程序不添加到单个项目，而是添加到名称为$('input:radio[name=whatever]').change(...);的所有单选按钮。

函数内部很容易编写代码，使用jQuery的next()方法直接跟随单击的单选按钮的文本字段，并禁用组中其他单选按钮之后的所有其他文本字段。

Answer 4

如果你不能改变的HTML，但id S中的单选按钮和投入将继续匹配（xxxRadio和xxxInput），你可以通过查找选中的单选按钮的id，并使处理事情相应的输入：

$('input[name=switched]').change(
 
    function() { 
 
    var selected = $('input[name=switched]:checked'); 
 
    var selId = selected.attr('id'); 
 
    var inpId = '#' + selId.replace(/Radio$/, 'Input'); 
 
    var activeInput = $(inpId); 
 
    
 
    $('input.form-control').prop('disabled' ,true); 
 
    activeInput.prop('disabled', false); 
 
    } 
 
);

@import url('http://getbootstrap.com/dist/css/bootstrap.css'); 
 
div.input-group > div.input-group > span.input-group-addon { 
 
    border-radius: 0px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
Please enter amount in "$" or "%":<p/> 
 
<div class="col-sm-4"> 
 
    <div class="input-group"> 
 
     <span class="input-group-addon"> 
 
\t \t \t \t <input name="switched" checked="checked" type="radio" id="dolorsRadio"> 
 
\t \t </span> \t 
 
     <div class="input-group input-group-applyed-input-manager"> 
 
      <span class="input-group-addon">$</span> 
 
      <input class="form-control" type="text" id="dolorsInput"> 
 
     </div> 
 
    </div> 
 
</div> 
 
     
 
<div class="col-sm-4"> 
 
    <div class="input-group"> 
 
     <span class="input-group-addon"> 
 
\t \t \t \t <input name="switched" type="radio" id="precentRadio"> 
 
\t \t </span> \t 
 
     <div class="input-group input-group-applyed-input-manager"> 
 
      <span class="input-group-addon">%</span> 
 
      <input class="form-control" type="text" id="precentInput" disabled="true"> 
 
     </div> 
 
    </div> 
 
</div>