javascript avoid submit if no box checked

Question

!hello,

i have a number of checkboxes generated with PHP. There is a validation button. I want to prevent the user to valid the form without checking at least 1 checkbox.

I have this code

var checkboxes = document.getElementsByName('date[]');
var btn = document.getElementById('Submit');
date.onchange = function(){
   for (var i=0;i<checkboxes.length;i++)
   {
      if(checkboxes[i].checked)
      {
         btn.disabled = false;
      } 
      else 
      {
         btn.disabled = true;
      }
   }
}
<form>
....
<table>
    <tr id="{{ cpt }}">
        <td><input type="checkbox" class="date" id="date" name="date[]"
                            checked value="{{ jdv.day }}"></td>
        <td>{{ jdv.day }}</td>
   </tr>
</table> 
</form>

But it only work for the first checkbox!

can you help me?

Thanks

Where did you define `date` and can we see your HTML as well please. — putvande, May 16 '14 at 13:50

score 0 · Answer 1 · answered May 16 '14 at 13:54

Your script will set button.disabled = true; for every checkbox that is unchecked... that means if you check any box than the last, this will always set disabled to true in the end.

add this to your function after btn.disabled = false;

return true;

resulting in this code:

var checkboxes = document.getElementsByName('date[]');
var btn = document.getElementById('Submit');
date.onchange = function(){
   for (var i=0;i<checkboxes.length;i++)
   {
      if(checkboxes[i].checked)
      {
         btn.disabled = false;
         return true;
      } 
      else 
      {
         btn.disabled = true;
      }
   }
}

this will stop your function once it detects the first checked checkbox and prevent the following ones from overriding the disabled property of your button.

Thanks for your reply. It just works for the first checkbox. I'll put my html : oops, not here — ramsey_lewis, May 16 '14 at 14:10

score -1 · Answer 2 · answered May 16 '14 at 13:51

-1

You'd better do some counter which'll count checked checkboxes and in the end compare it with number of minimum num of checked checkboxes

answered May 16 '14 at 13:51

desu

455
2
18

_at least 1 checkbox_ – putvande May 16 '14 at 13:53

score -1 · Answer 3 · answered May 16 '14 at 13:53

-1

you should keep a variable, avoiding that other checkboxes results override each other.

Something like:

var toShow = true;
var checkboxes = document.getElementsByName('date[]');
var btn = document.getElementById('Submit');
date.onchange = function(){
for (var i=0;i<checkboxes.length && toShow;i++) {
    if(!checkboxes[i].checked)
    {
         toShow = false;
    }
}
if(toShow)
    btn.disabled = false;
} else 
{
    btn.disabled = true;
}

answered May 16 '14 at 13:53

DropDaCode

1

The first unchecked checkbox will set toShow to false, stop the loop and set the button to disabled. That means if any following checkbox is checked it will be ignored. – Merlin Denker May 16 '14 at 13:59
Thanks, i just tried it but it doesn't work :(. Nothing happens when i click in the checkboxes. My button isn't disable – ramsey_lewis May 16 '14 at 14:16
Oh, sorry .. I followed your code and now I see that the idea isnt' that. You should invert the idea. Set "toShow = false" and "if(checkboxes[i].checked) -> toShow = true" This will make that, if at least one is checked, it enables the button. (and put !toShow in the while) Hugs – DropDaCode May 16 '14 at 14:52

javascript avoid submit if no box checked

3 Answers3