一旦我检查了一种输入类型单选，如何禁用和启用输入类型提交？
Posted
技术标签:
【中文标题】一旦我检查了一种输入类型单选，如何禁用和启用输入类型提交？【英文标题】：How do I disable and enable back the input type submit, once I have checked one input type radio? 【发布时间】：2017-03-09 22:18:41 【问题描述】：我希望标题能说明一切。 我有一个表单，有很多组输入类型单选，我希望禁用输入类型提交按钮，直到检查了每个组中的一个输入类型单选。这个例子只是一组输入类型的收音机，但它显然不起作用。我错过了什么？
https://jsfiddle.net/Suiberu/70tkgk5t/
var current = $('input.class_x').filter(':checked');
var sbmtBtn = document.getElementById('SubmitButton');
sbmtBtn.disabled = true;
if (current.length > 0)
sbmtBtn.disabled = false;
else
sbmtBtn.disabled = true;
谢谢！
【问题讨论】：
【参考方案1】：您发布的代码的问题是您在页面加载时运行脚本，此时 - 在您的演示中 - 没有选定的无线电输入。要使该代码正常工作，您只需将其包装在一个事件处理程序中，用于无线电 <input> 元素的 change 事件：
// binds the anonymous function of the on() method to act
// as the event-handler for the 'change' event triggered
// on the <input> elements of type=radio:
$('input[type=radio]').on('change', function()
var current = $('input.class_x').filter(':checked');
var sbmtBtn = document.getElementById('SubmitButton');
sbmtBtn.disabled = true;
if (current.length > 0)
sbmtBtn.disabled = false;
else
sbmtBtn.disabled = true;
// fires the 'change' event when the script is
// first run, which sets the disabled property
// of the submit-button appropriately:
).change();
$('input[type=radio]').on('change', function()
var current = $('input.class_x').filter(':checked');
var sbmtBtn = document.getElementById('SubmitButton');
sbmtBtn.disabled = true;
if (current.length > 0)
sbmtBtn.disabled = false;
else
sbmtBtn.disabled = true;
).change();input
display: block;
margin: 0.5em 0;
input[type='submit']:disabled
color: red;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myform" autocomplete="off" method="post">
<input class="class_x" type="radio" name="name_x" value="value_1" id="id_1" />
<input class="class_x" type="radio" name="name_x" value="value_2" id="id_2" />
<input class="class_x" type="radio" name="name_x" value="value_3" id="id_3" />
<input type="submit" name="name_submit" value="OK" class="class_submit" id="SubmitButton" required/>
</form>JS Fiddle demo.
要处理多组无线电输入，一种效率低下的方法是简单地使用任一附加类，在选择器中指定组名称来识别这些组。
这种方法效率低下，因为您需要提前知道每组元素的标识符，以及将有多少个（因为您最初硬编码了必须在 if 语句中检查的元素数量)。
$('input[type=radio]').on('change', function()
var current = $('input.class_x, input.class_y, input.class_z').filter(':checked');
var sbmtBtn = document.getElementById('SubmitButton');
sbmtBtn.disabled = true;
if (current.length > 2)
sbmtBtn.disabled = false;
else
sbmtBtn.disabled = true;
).change();input
display: block;
margin: 0.5em 0;
input[type='submit']:disabled
color: red;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myform" autocomplete="off" method="post">
<fieldset>
<input class="class_x" type="radio" name="name_x" value="value_1" />
<input class="class_x" type="radio" name="name_x" value="value_2" />
<input class="class_x" type="radio" name="name_x" value="value_3" />
</fieldset>
<fieldset>
<input class="class_y" type="radio" name="name_y" value="value_1" />
<input class="class_y" type="radio" name="name_y" value="value_2" />
<input class="class_y" type="radio" name="name_y" value="value_3" />
</fieldset>
<fieldset>
<input class="class_z" type="radio" name="name_z" value="value_1" />
<input class="class_z" type="radio" name="name_z" value="value_2" />
<input class="class_z" type="radio" name="name_z" value="value_3" />
</fieldset>
<input type="submit" name="name_submit" value="OK" class="class_submit" id="SubmitButton" required/>
</form>因此，为了避免这种低效率，我们都希望代码本身可以，给定一个简单的选择器，例如$('input[type=radio]')，确定有多少组，因此必须检查多少元素才能满足标准of '每个组都有一个检查。'
幸运的是，下面的代码就是这样做的：
// we need to use this collection within the event-handler,
// so we're caching it here:
var allRadios = $('input[type=radio]');
// binding the anonymous function as the event-handler for
// the 'change' event, as before:
allRadios.on('change', function()
// retrieving the names of all radio-inputs on the page,
// using map():
var groups = allRadios.map(function()
// returning the 'name' property of each of the
// radio-inputs to the created map:
return this.name;
// converting the map into an Array:
).get(),
// creating an empty Array to hold the unique
// group-names:
uniqueGroupNames = [];
// iterating over the groups Array using the
// Array.prototype.forEach() method:
groups.forEach(function(name)
// 'name' is a reference to the current Array-element
// of the Array over which we're iterating.
// the name (the current Array-element) is not found
// within the uniqueGroupNames Array:
if (uniqueGroupNames.indexOf(name) === -1)
// then we add it to that Array:
uniqueGroupNames.push(name)
);
// here we find the submit-button, and use the prop()
// method to set its 'disabled' property, using a
// conditional (ternary) operator:
$('input[type=submit]').prop('disabled',
// we find the number of checked radio-inputs and if
// that number is less than the number of unique group
// names the condition evaluates to true and the disabled
// property is sset to true; if the number of checked
// radio-inputs is not less-than the number of group names,
// the condition is false, and the disabled property is set
// to false:
allRadios.filter(':checked').length < uniqueGroupNames.length
);
).change();
var allRadios = $('input[type=radio]');
allRadios.on('change', function()
var groups = allRadios.map(function()
return this.name;
).get(),
uniqueGroupNames = [];
groups.forEach(function(name)
if (uniqueGroupNames.indexOf(name) === -1)
uniqueGroupNames.push(name)
);
$('input[type=submit]').prop('disabled', allRadios.filter(':checked').length < uniqueGroupNames.length);
).change();input
display: block;
margin: 0.5em 0;
input[type='submit']:disabled
color: red;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myform" autocomplete="off" method="post">
<fieldset>
<input class="class_x" type="radio" name="name_x" value="value_1" />
<input class="class_x" type="radio" name="name_x" value="value_2" />
<input class="class_x" type="radio" name="name_x" value="value_3" />
</fieldset>
<fieldset>
<input class="class_y" type="radio" name="name_y" value="value_1" />
<input class="class_y" type="radio" name="name_y" value="value_2" />
<input class="class_y" type="radio" name="name_y" value="value_3" />
</fieldset>
<fieldset>
<input class="class_z" type="radio" name="name_z" value="value_1" />
<input class="class_z" type="radio" name="name_z" value="value_2" />
<input class="class_z" type="radio" name="name_z" value="value_3" />
</fieldset>
<input type="submit" name="name_submit" value="OK" class="class_submit" id="SubmitButton" required/>
</form>JS Fiddle demo.
参考：
CSS：:checked pseudo-class。
javascript：
Array.prototype.forEach()。
Conditional (ternary) Operator。
jQuery:
change()。
Filter()。
get()。
map()。
on()。
prop()。
【讨论】：
这是一个很好的解释。我能说什么？非常感谢，至少！我会仔细研究所有这些笔记。我很高兴在您的上一个示例中您使用以下语法： if (current.length > 0)...... 因为这是我首先要查找的内容。一个非常有用的答案，真的。【参考方案2】：see updated fiddle
$(document).ready(function ()
var sbmtBtn = document.getElementById('SubmitButton');
sbmtBtn.disabled = true;
$('.class_x').click(function ()
if ($('.class_x').is(':checked'))//if only allow any on of the radio checked
sbmtBtn.disabled= false;
else
sbmtBtn.disabled = true;
)
);
【讨论】：
好吧，这似乎是要走的路。问题是在我的原始项目中，我有很多输入类型的收音机组，你如何将你的代码调整为这种性质的形式？我看到你的代码，我更新了小提琴jsfiddle.net/Suiberu/70tkgk5t/6 你应用了错误的类名.limit_radio1 类在你的 html 中不可用
jsfiddle.net/70tkgk5t/7 查看小提琴它为您的新小提琴解决的问题。在 jquery 调用中使用相同的类或类名与, 不同
我的错！你说的对！我使用了错误的班级名称，对不起，是的。哦，但是代码没有按照我的要求工作，需要的是输入类型提交被禁用，直到第一个无线电组和第二个无线电组之一被检查。在您最后的小提琴中，提交按钮仅通过检查单个组即可启用。能帮上忙吗？抱歉之前的错误！
清楚地告诉...何时禁用按钮的时间 ..2 组检查或任何无线电检查【参考方案3】：
您可以使用此代码获取所选类型，
$('#check_id').on('change', '[name=cust_check]', function()
checkValues = $('input[name=cust_check]:checked').map(function()
return $(this).attr('value');
).get();
);
【讨论】：
对不起，我应该说我不太懂javascript。你能编辑我当前的代码，以便我可以让它工作吗？或者至少检查一下出了什么问题。不过谢谢！以上是关于一旦我检查了一种输入类型单选，如何禁用和启用输入类型提交？的主要内容，如果未能解决你的问题，请参考以下文章