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

Multi inputs which user can only enter in one of them

本文关键字：输入 一个 用户 在其中      更新时间：2023-09-26

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

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);
})

有什么方法可以最小化代码吗？！

工作演示

为触发禁用/启用输入的按钮使用类名，为输入使用类名。全部禁用它们，并通过从单击的按钮遍历到最近的.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()来禁用。

您可以向单选按钮添加一个公共类，并为所有单选按钮附加一个事件。从那里，您可以使用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);
});

小提琴示例

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

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

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

如果您不能更改HTML，但单选按钮和输入的ids将继续匹配（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>

相关文章：