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/