jquery - Checkbox Required with same name on an EDIT/MODIFY form

Question

I'm usig this code from Required attribute on multiple checkboxes with the same name? by Zhomart.

It works great when you enter a new entry, but if used on an edit/modify form (that loads data from a database) they require you to check a checkbox, even if the form already has (at least) one checkbox checked. Could you suggest how to modify the script so that it also consider if at least one checkbox with the same id/name is already checked? Thanks!!

Here is the code:

$(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');
    }
  });
}();
}

});`

CODE FOR REQUIRED PLUS AUTO-CHECK This code allows to extend the required to checkboxes that autocomplete:

$(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  
 });  
});

Only problem, that the required attribute doesn't work anymore if the checkbox (after auto-checked) is manually unclicked.

You can write a extra code on document ready to check for the check boxes which are already checked and remove the required attribute from them. Now you are doing that check on `change` event. You just have to get the code to do a check initially on document ready as well — Rajshekar Reddy, Jan 18 '16 at 00:55
Thanks Reddy, could just give me an example of the code I should change? — codeispoetry, Jan 18 '16 at 04:02

score 1 · Accepted Answer · answered Jan 18 '16 at 07:26

1

Just removing the Change event handler on the above code will work on load of the document. Place this code after your last for loop

 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');
    }
   }();
}

NOTE: I have removed the change event handler. Everything else is the same code.

working JS fiddle https://jsfiddle.net/RajReddy/yf17eL3p/3/

answered Jan 18 '16 at 07:26

Rajshekar Reddy

18,647
3
40
59

Great to know that I was helpful. – Rajshekar Reddy Jan 18 '16 at 20:31
Sorry, another quick question, I have some checkboxes that auto-check (i.e. when a date is selected, the checkbox with related day is auto-checked). I noticed that (even if the checkbox is already checked automatically by javascript) I have manually to re-check it, if not it will continue to require it. Do you think there is a way to modify your code to avoid it? Something like ` if(checkboxes.is(':checked') || .checked = true )... ` Thanks!!! – codeispoetry Feb 22 '16 at 00:22
1

Its simple as above, See the above answer runs on page load and checks all the checked checkboxes and removes the reuired attribute, And as you previously did you were doing it on change event of the checkbox, Now this scenario is neither page load nor change event. The solution is, you can instead of changing the attribute to checked you can trigger click on the checkboxes what you auto-check, this will trigger the change event function which you already have and work fine. OR youhave to just autocheck the checkbox and next line remove the attr required from it. – Rajshekar Reddy Feb 22 '16 at 02:46
Thanks Reddy! I implemented code with your comment (edit to my question). There is one last step... could you please get a look to my edited question? I wrote everything there. Thanks!! – codeispoetry Feb 22 '16 at 04:58
when I choose the date (2016-02-22), it auto-checks the respective day checkbox (Monday). But if then I manually uncheck Monday (so that no day is checked anymore) the require doesn't work and I can submit the form anyways. Thanks! – codeispoetry Feb 22 '16 at 14:17
May be the change event for that checkbox is not triggered when you manually uncheck it. or something over there – Rajshekar Reddy Feb 22 '16 at 14:21

jquery - Checkbox Required with same name on an EDIT/MODIFY form

1 Answers1