几个复选框和验证jQuery
Several checkboxes and validation jQuery
我正在做一个调查问卷，有几个复选框(是，否)，如果都是'否'，下面的字段应该是只读和禁用的，但如果有任何'是'，字段应该是必需的。所有的问卷都在一个表格中，每个tr对应两个复选框。
我尝试了很多东西，但我肯定有人有比我更好的主意。
HTML代码如下:
<div class="questionnaire_a">
<table class="table questionnaire">
<thead>
<tr>
<th>Is required?</th>
<th>YES</th>
<th>NO</th>
</tr>
</thead>
<tbody>
<tr id="quest" class="quest">
<td>Q1</td>
<td><input type="checkbox" id="ques_Q1y" name="ques_Q1y" class="table quest_q"></td>
<td><input type="checkbox" id="ques_Q1n" name="ques_Q1n" class="table quest_q"></td>
</tr>
<tr id="quest" class="quest">
<td>Q2</td>
<td><input type="checkbox" id="ques_Q2y" name="ques_Q2y" class="table quest_q"></td>
<td><input type="checkbox" id="ques_Q2n" name="ques_Q2n" class="table quest_q"></td>
</tr>
<tr id="quest" class="quest">
<td>Q3</td>
<td><input type="checkbox" id="ques_Q3y" name="ques_Q3y" class="table quest_q"></td>
<td><input type="checkbox" id="ques_Q3n" name="ques_Q3n" class="table quest_q"></td>
</tr>
<tr id="quest" class="quest">
<td>Q4</td>
<td><input type="checkbox" id="ques_Q4y" name="ques_Q4y" class="table quest_q"></td>
<td><input type="checkbox" id="ques_Q4n" name="ques_Q4n" class="table quest_q"></td>
</tr>
</tbody>
</table>
</div>
<div id="fields" class="fields">
<select class="pos" id="pos" name="pos"></select>
<input type="number" step="1" class="len" id="len" name="len">
<input type="number" step="1" class="he" id="he" name="he">
<select class="perm" id="perm" name="perm"></select>
</div>
我想使下面的字段(输入和选择)可读或必需的，取决于复选框。我的Jquery脚本在更改复选框时是活跃的，如下所示:
$("input[type='checkbox'][name^='ques_']:checkbox").change(function() {
//Code
});
添加新组时:
var group = $('#group').clone(),
group_fields = group.find('input, select,table, td, .questionnaire, questionnaire_a, .quest_q')
group_fields.each(function() {
$(this).attr('id', $(this).attr('id') + '_' + num);
$(this).attr('name', $(this).attr('name') + '_' + num);
这是我选择复选框时检查的方式，但我不知道如何知道是否有"是"或"否"，以及如何计数以使其他字段必需或可读。
如果你们有什么想法，谢谢你们的帮助
下面是根据复选框是否被选中来启用/禁用的代码。我把制作它们作为一个练习，但由于我展示了如何在字段上设置属性，因此应该非常简单。
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<table class="table questionnaire">
<thead>
<tr>
<th>Is required?</th>
<th>YES</th>
<th>NO</th>
</tr>
</thead>
<tbody>
<tr id="quest" class="quest">
<td>Q1</td>
<td><input type="radio" id="ques_Q1y" value="y" class="table quest_q" name="ques_Q1"></td>
<td><input type="radio" id="ques_Q1n" value="n" class="table quest_q" name="ques_Q1" checked></td>
</tr>
<tr id="quest" class="quest">
<td>Q2</td>
<td><input type="radio" id="ques_Q2y" value="y" class="table quest_q" name="ques_Q2"></td>
<td><input type="radio" id="ques_Q2n" value="n" class="table quest_q" name="ques_Q2" checked></td>
</tr>
<tr id="quest" class="quest">
<td>Q3</td>
<td><input type="radio" id="ques_Q3y" value="y" class="table quest_q" name="ques_Q3"></td>
<td><input type="radio" id="ques_Q3n" value="n" class="table quest_q" name="ques_Q3" checked></td>
</tr>
<tr id="quest" class="quest">
<td>Q4</td>
<td><input type="radio" id="ques_Q4y" value="y" class="table quest_q" name="ques_Q4"></td>
<td><input type="radio" id="ques_Q4n" value="n" class="table quest_q" name="ques_Q4" checked></td>
</tr>
</tbody>
</table>
<div id="fields" class="fields">
<select class="pos" id="pos" name="pos"></select>
<input type="number" step="1" class="len" id="len" name="len">
<input type="number" step="1" class="he" id="he" name="he">
<select class="perm" id="perm" name="perm"></select>
</div>
</body>
</html>
$(document).ready(function() {
var radios = $("input[type='radio'][name^='ques_']");
radios.change(function() {
updateFields();
});
function updateFields() {
var enabled = anyYesChecked(radios)
enableFields(enabled);
}
function anyYesChecked(cbs) {
var anyChecked = false;
$.each(cbs, function(index, cb) {
if (cb.value=='y' && cb.checked) anyChecked = true;
});
return anyChecked;
}
function enableFields(enabled) {
// enble fields
$('#pos').prop('disabled', !enabled);
$('#len').prop('disabled', !enabled);
$('#he').prop('disabled', !enabled);
$('#perm').prop('disabled', !enabled);
// make fields required
//TODO
}
updateFields();
});
这里是用于演示目的的plunkr: http://plnkr.co/edit/vYGCrEr4WpTA7b4FdBSq?p=preview
也许你可以在Yes框中添加一个"Yes"类。在复选框更改的事件处理程序中，您可以检查选中的"Yes"类的数量。如果该数字大于0，则激活字段div中的字段并添加所需的属性。
$("input[type='checkbox'][name^='ques_']:checkbox").change(function() {
var yes = $(".yes:checked").length;
if(yes > 0){
$("#fields").children().prop("disabled",false).prop("required",true);
}
else{
$("#fields").children().prop("disabled",true).prop("required",false);
}
});
你可以硬编码每个表单元素的disabled属性，如果你想让它们一开始是disabled的。
我在jsfiddle中测试了它:https://jsfiddle.net/seattaball/9hpc73t1/1/
尝试使用.index(), Array.prototype.some
var input = $("input[type=checkbox][name^=ques_]:checkbox")
, fields = $("#fields").find("input, select");
input.change(function(e) {
var res = Array.prototype.some.call(input, function(elem, idx) {
return $(elem).parent().index() === 2 && elem.checked
});
console.log($(this).parent().index(), res);
if (res) {
fields
.each(function(i, el) {
el.disabled = true;
el.readonly = true;
el.required = false;
})
} else {
fields
.each(function(i, el) {
el.disabled = false;
el.readonly = false;
el.required = true;
})
};
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<table class="table questionnaire">
<thead>
<tr>
<th>Is required?</th>
<th>YES</th>
<th>NO</th>
</tr>
</thead>
<tbody>
<tr id="quest" class="quest">
<td>Q1</td>
<td>
<input type="checkbox" id="ques_Q1y" name="ques_Q1y" class="table quest_q">
</td>
<td>
<input type="checkbox" id="ques_Q1n" name="ques_Q1n" class="table quest_q">
</td>
</tr>
<tr id="quest" class="quest">
<td>Q2</td>
<td>
<input type="checkbox" id="ques_Q2y" name="ques_Q2y" class="table quest_q">
</td>
<td>
<input type="checkbox" id="ques_Q2n" name="ques_Q2n" class="table quest_q">
</td>
</tr>
<tr id="quest" class="quest">
<td>Q3</td>
<td>
<input type="checkbox" id="ques_Q3y" name="ques_Q3y" class="table quest_q">
</td>
<td>
<input type="checkbox" id="ques_Q3n" name="ques_Q3n" class="table quest_q">
</td>
</tr>
<tr id="quest" class="quest">
<td>Q4</td>
<td>
<input type="checkbox" id="ques_Q4y" name="ques_Q4y" class="table quest_q">
</td>
<td>
<input type="checkbox" id="ques_Q4n" name="ques_Q4n" class="table quest_q">
</td>
</tr>
</tbody>
</table>
<div id="fields" class="fields">
<select class="pos" id="pos" name="pos"></select>
<input type="number" step="1" class="len" id="len" name="len">
<input type="number" step="1" class="he" id="he" name="he">
<select class="perm" id="perm" name="perm"></select>
</div>相关文章：
- 验证jquery中的数字
- 在发送之前验证jQuery或Javascript中的URL
- 提交/验证Jquery
- 验证 jQuery 中带有一个小数位的负数
- 如何验证 jquery cookie .js兼容性
- 验证 JQuery 中是否存在 URL
- 电子邮件验证 jquery
- 选择.js并验证 jquery
- 验证 jquery 评级星
- 如何为这些要求创建 URL 验证 jQuery
- 时间选择器验证?JQuery/Javascript
- 删除最近的下拉列表并验证Jquery中的下拉列表
- 验证jquery函数的问题
- 电子邮件验证Jquery不起作用
- 如何验证jquery函数中的输入字段
- 表单验证——jQuery验证是否足够，以及如何在PHP中巧妙地验证数据
- 当其他浏览器验证时，是什么导致I.E.不验证(jquery) ?
- 提交表单与ajax验证jquery /标准javascript
- 如何验证jquery中的表单
- 尝试验证jQuery UI日期选择器
