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

Question

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

如果输入的数量增加（例如 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

您可以向单选按钮添加一个通用 class，然后将一个事件附加到所有单选按钮。从那里您可以使用 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 2

Working demo

对触发输入 disable/enable 的按钮使用 class 名称，对输入使用 class 名称。将它们全部禁用，然后通过从单击的按钮遍历到最近的 .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 3

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

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

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

Answer 4

如果您无法更改 HTML，但单选按钮和输入的 id 将继续匹配（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">
     <input name="switched" checked="checked" type="radio" id="dolorsRadio">
  </span> 
        <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">
     <input name="switched" type="radio" id="precentRadio">
  </span> 
        <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>

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

Multi inputs which user can only enter in one of them

html

javascript

jquery

twitter-bootstrap-3