jquery - EDIT/MODIFY 表单上需要具有相同名称的复选框
jquery - Checkbox Required with same name on an EDIT/MODIFY form
我正在使用来自 Zhomart Required attribute on multiple checkboxes with the same name? 的代码。
当你输入一个新的条目时,它工作得很好,但如果在 edit/modify 表单(从数据库加载数据)上使用,它们需要你选中一个复选框,即使表单已经有(在至少)选中一个复选框。您能否建议如何修改脚本,以便它还考虑是否已选中至少一个具有相同 id/name 的复选框?谢谢!!
代码如下:
$(function(){
var allRequiredCheckboxes = $(':checkbox[required]');
var checkboxNames = [];
for (var i = 0; i < allRequiredCheckboxes.length; ++i){
var name = allRequiredCheckboxes[i].name;
checkboxNames.push(name);
}
checkboxNames = checkboxNames.reduce(function(p, c) {
if (p.indexOf(c) < 0) p.push(c);
return p;
}, []);
for (var i in checkboxNames){
!function(){
var name = checkboxNames[i];
var checkboxes = $('input[name="' + name + '"]');
checkboxes.change(function(){
if(checkboxes.is(':checked')) {
checkboxes.removeAttr('required');
} else {
checkboxes.attr('required', 'required');
}
});
}();
}
});`
要求加自动检查代码
此代码允许将要求扩展到自动完成的复选框:
$(document).ready(function (){
$("#date").on('change', function(){//look at enter/change date
for (var i = 1; i < 8; ++i){ //this removes previusly checked days
document.getElementById("courseweekday"+i).checked = false;
}
var weekdaynumber = $( "#weekdaynumber" ).val(); //get value of box id that needs to be checked
document.getElementById("weekday"+weekdaynumber).click(); //check box with relative id
});
});
唯一的问题是,如果复选框(自动选中后)被手动取消单击,则所需的属性将不再起作用。
只需删除上述代码中的 Change 事件处理程序即可加载文档。将此代码放在最后一个 for 循环之后
for (var i in checkboxNames){
!function(){
var name = checkboxNames[i];
var checkboxes = $('input[name="' + name + '"]');
if(checkboxes.is(':checked')) {
checkboxes.removeAttr('required');
} else {
checkboxes.attr('required', 'required');
}
}();
}
注意:我已经删除了更改事件处理程序。其他都是一样的代码。
工作 JS fiddle https://jsfiddle.net/RajReddy/yf17eL3p/3/
我正在使用来自 Zhomart Required attribute on multiple checkboxes with the same name? 的代码。
当你输入一个新的条目时,它工作得很好,但如果在 edit/modify 表单(从数据库加载数据)上使用,它们需要你选中一个复选框,即使表单已经有(在至少)选中一个复选框。您能否建议如何修改脚本,以便它还考虑是否已选中至少一个具有相同 id/name 的复选框?谢谢!!
代码如下:
$(function(){
var allRequiredCheckboxes = $(':checkbox[required]');
var checkboxNames = [];
for (var i = 0; i < allRequiredCheckboxes.length; ++i){
var name = allRequiredCheckboxes[i].name;
checkboxNames.push(name);
}
checkboxNames = checkboxNames.reduce(function(p, c) {
if (p.indexOf(c) < 0) p.push(c);
return p;
}, []);
for (var i in checkboxNames){
!function(){
var name = checkboxNames[i];
var checkboxes = $('input[name="' + name + '"]');
checkboxes.change(function(){
if(checkboxes.is(':checked')) {
checkboxes.removeAttr('required');
} else {
checkboxes.attr('required', 'required');
}
});
}();
}
});`
要求加自动检查代码 此代码允许将要求扩展到自动完成的复选框:
$(document).ready(function (){
$("#date").on('change', function(){//look at enter/change date
for (var i = 1; i < 8; ++i){ //this removes previusly checked days
document.getElementById("courseweekday"+i).checked = false;
}
var weekdaynumber = $( "#weekdaynumber" ).val(); //get value of box id that needs to be checked
document.getElementById("weekday"+weekdaynumber).click(); //check box with relative id
});
});
唯一的问题是,如果复选框(自动选中后)被手动取消单击,则所需的属性将不再起作用。
只需删除上述代码中的 Change 事件处理程序即可加载文档。将此代码放在最后一个 for 循环之后
for (var i in checkboxNames){
!function(){
var name = checkboxNames[i];
var checkboxes = $('input[name="' + name + '"]');
if(checkboxes.is(':checked')) {
checkboxes.removeAttr('required');
} else {
checkboxes.attr('required', 'required');
}
}();
}
注意:我已经删除了更改事件处理程序。其他都是一样的代码。
工作 JS fiddle https://jsfiddle.net/RajReddy/yf17eL3p/3/