javascript - 多输入，用户只能输入其中之一

Question

考虑一个具有许多输入的表单，每个输入都有一个与其关联的单选按钮。用户选择一个 radio ，就会显示相关的输入。

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 中的 bool 值，它要么存在，要么不存在，您应该使用 .prop() 禁用时不使用 attr()。