Question

我是由Zhomart从Required attribute on multiple checkboxes with the same name?获取此代码。

当您输入新条目时它很有用，但如果在编辑/修改表单（从数据库加载数据）上使用它们，则需要您选中复选框，即使表单已经（至少）有一个复选框检查。你能否建议如何修改脚本，以便它还考虑是否已经检查了至少一个具有相同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  
 });  
});

唯一的问题是，如果手动取消选中复选框（自动检查后），则必需属性不再起作用。

Answer 1

只需删除上述代码中的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小提琴https://jsfiddle.net/RajReddy/yf17eL3p/3/

jquery - 复选框在编辑/修改表单

1 个答案: