我需要在选中所有单选按钮(必需的)时启用按钮。我有一个想法,如何做到这一点与固定数量的选项(单选按钮对,是或否)。问题是,表单是使用php动态生成的,需要用户使用单选按钮回答"是"或"否"的"问题"数量是未知的。
这是一个生成的html示例代码:<form>
Generic Privacy Policy
[*]static global opt1
<input type="radio" name="ppopt1" value="0" data-req="1"> No
<input type="radio" name="ppopt1" value="1" data-req="1"> Yes
[*]static global opt2
<input type="radio" name="ppopt2" value="0" data-req="1"> No
<input type="radio" name="ppopt2" value="1" data-req="1"> Yes
static global opt3
<input type="radio" name="ppopt3" value="0" data-req="0"> No
<input type="radio" name="ppopt3" value="1" data-req="0"> Yes
static global opt4
<input type="radio" name="ppopt4" value="0" data-req="0"> No
<input type="radio" name="ppopt4" value="1" data-req="0"> Yes
<button name="btn" type="button" disabled>Send!</button>
</form>
正如你所看到的,我使用data-req来指定问题是否需要和答案(并且它也需要是Yes value=1)。
如何(也许使用jquery)我可以启用按钮btn当条件实现?
p。我已经完全控制了PHP代码,所以如果您认为对PHP代码进行一些修改可以简化前端编码,可以自由提出建议。
我是这样做的:
$(document).ready(function () {
var $form = $("form"),
$button = $form.find("button"),
$radios = $form.find('input[type="radio"]'),
$requiredRadios = $radios.filter('[data-req="1"]');
$requiredRadios.on("click", function () {
var numValid = 0;
$requiredRadios.each(function () {
var $this = $(this),
myName = $this.attr("name"),
isYes = ($this.val() === "1"),
$target = (isYes ? $this : $radios.filter('input[name="' + myName + '"][value="1"]'));
if ($target.prop("checked")) {
numValid++;
}
});
if (numValid === $requiredRadios.length) {
$button.prop("disabled", false);
} else {
$button.prop("disabled", true);
}
});
});
演示:http://jsfiddle.net/aCheQ/1/
它找到所有必需的单选按钮,并为每个按钮绑定一个click
处理程序。当单击其中一个按钮时,将遍历所有必需的单选按钮,并计算是否单击了足够的"Yes"单选按钮。如果是,则启用该按钮,否则禁用该按钮。我相信它可以稍微清理一下,或者更有效率,但它似乎是人们所期望的。
$(function() {
$("input[type='radio']").click(function(){
$requires = $('input:radio[data-req=1][value=1]');
var checked = 0;
$requires.each(function () {
if($(this)[0].checked)
$("button").attr("disabled", (++checked < $requires.length));
});
});
});
jsFiddle代码
只需添加以下javascript,代码注释中有解释
$('input[type="radio"]').change(function ()
{
var req,reqYes;
req=$('input[type="radio"][data-req="1"][value="1"]').length;
reqYes=$('input:checked[type="radio"][data-req="1"][value="1"]').length;
document.getElementsByName("btn")[0].disabled= (req!=reqYes);
return true;
}
);
/* - Is onchange because it happens after the click once the radiobutton state has been changed
- Is getElementsByName()[0] because you used the name instead the ID (The id is unique, but not the name so it returns an array of objects)
- No need to do a foreach since you can check the Radiosbutton required and the Required with yes answer, the foreach is done by Jquery
**/
此处fiddle here http://jsfiddle.net/egorbatik/pVh4U/
如果每个组只包含yes/no,那么您只需检查以确保选中的yes无线电的数量是所需无线电总数的一半
$(function () {
var req = $('input[data-req=1]');
req.change(function () {
// if the checked radios with value=1 amount == half of the total required (because only Yes or No can be checked)
var allchecked = req.filter('[value=1]:checked').length == req.length/2
// disable of not all checked - enable if all checked
$('button').prop('disabled', !allchecked);
});
});
小提琴
如果您想检查组的数量,您可以循环并获得不同的输入名称
$(function () {
var req = $('input[data-req=1]');
var groups = [];
req.each(function(i,v){
// if group name not in array add it
if($.inArray(v.name,groups) == -1){
groups.push(v.name);
}
});
req.change(function () {
// if the checked amount == number of groups
var allchecked = req.filter('[value=1]:checked').length == groups.length;
// disable of not all checked - enable if all checked
$('button').prop('disabled', !allchecked);
});
});
小提琴
想想这个——你也可以根据data-req=1和value=1的元素数量来检查选中YES的数量
$(function () {
var req = $('input[data-req=1]');
req.change(function () {
var allchecked = req.filter('[value=1]:checked').length == req.filter('[value=1]').length;
$('button').prop('disabled', !allchecked);
});
});
小提琴
完全测试代码和工作
$("input[type='radio']").click(function(){
var enableButton = false;
var totalChecked = 0;
var reqElements = $('input:radio[data-req =1]');
var reqElementsCount= $("input:radio[data-req =1][value=1]").size();
$(reqElements).each(function (index, ele) {
if($(ele).is(":checked") && ele.value === "1"){
totalChecked++;
}
});
if(totalChecked == reqElementsCount){
$("button").removeAttr("disabled");
}
else{
$("button").attr("disabled",true);
}
});
demo at JSFiddle