用户只能在其中一个输入的多输入
考虑一个有很多输入的表单,每个输入都有一个与它们关联的单选按钮。用户选择收音机并显示相关的输入。用户只能在其中一个输入的多输入
如果投入增加(例如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()
。
谢谢提及道具() – 2015-03-02 15:25:22
感谢(+1)!即使我们有其他没有任何单选按钮的输入,它也可以工作,如本演示http://jsfiddle.net/0uL6zzja/4/所示。 – 2015-03-03 04:24:55
你认为我们可以增强js以避免输入有自己的类,有些像@Rory McCrossan回答 – 2015-03-03 04:57:19
你可以添加一个普通的类到你的单选按钮并附加一个单独的事件给他们。从那里你可以使用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);
});
这是完美的主意。但请参阅http://jsfiddle.net/mtmh5db1/如果表单中有另一个输入组(不带单选按钮),脚本也会禁用它!我们可以通过更新选择器来避免这种情况吗? – 2015-03-02 15:23:50
当然。将单选按钮与类似功能相关联的正确方法是使用公用的name
而不是class
。这使得单选按钮相互排斥(因此组中只有一个选项可以同时激活)。
然后,将jQuery .change
处理程序不添加到单个项目,而是添加到名称为$('input:radio[name=whatever]').change(...);
的所有单选按钮。
函数内部很容易编写代码,使用jQuery的next()
方法直接跟随单击的单选按钮的文本字段,并禁用组中其他单选按钮之后的所有其他文本字段。
如果你不能改变的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>
是有。使用类名而不是用不同的ID编写大量代码。 – Popnoodles 2015-03-02 14:56:59