我希望标题能说明一切。 我有一个表单，有很多输入类型的无线电组，我希望输入类型提交按钮被禁用直到每个组的一个输入类型无线电被检查。这个例子只是一组输入型无线电，但它显然不起作用。我错过了什么？
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;
}
谢谢！
答案 0 :(得分：1)
$(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;
}
})
});
答案 1 :(得分：1)
您发布的代码的问题在于您在页面加载时运行脚本，此时您的演示中没有选定的无线电输入。要使代码正常工作，您只需将其包装在无线电change元素的<input>事件的事件处理程序中：
// 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>
要处理多组无线电输入，一种低效的方法是在选择器中使用其他类，指定组名来识别这些组。
这种方法效率很低，因为你需要提前知道每组元素的标识符，以及会有多少元素（因为你最初硬编码了{{1}中必须检查的一些元素。声明）。
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>之类的简单选择器确定有多少组，那么我们都会更喜欢它，因此必须检查多少个元素符合每组检查过的标准。＆＃39;
幸运的是，以下代码就是这样做的：
$('input[type=radio]')
// 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;
}
Refrences：
答案 2 :(得分：0)
您可以使用此代码获取所选类型
$('#check_id').on('change', '[name=cust_check]', function() {
checkValues = $('input[name=cust_check]:checked').map(function()
{
return $(this).attr('value');
}).get();
});