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

您可以在单选按钮中添加公共类，并将单个事件附加到所有这些按钮。从那里，您可以使用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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: