how to validate two checkbox in javascript

Question

I have two check boxes with different name and id and I want the users to check at least one of them if not the button will disable! but if one of them checked it will proceed to the other file

function validate(){
var time12 = document.getElementById("time12").checked;
var time24 = document.getElementById("time24").checked;

if((time12 == "") && ( time24 == "") )
{
	alert("Choose your hour rate");
	return false;
}
	return true;
}

   

<input id="time12"  type="checkbox" name="time12" value="12"   />12hours
<input id="time24"  type="checkbox" name="time24" value="24"   />24hours

but before you type your hate comments I want you to inform that I already search about it and I don't have the same question like this!

or suggest me other way thank you in advance

What button should get disabled? I see only two check-boxes. I see the validation method but nothing that triggers it. — David Somekh
– David Somekh, Commented Jul 20, 2017 at 20:12
im sorry i was too late to realize that i forgot to add my button... <input type="submit" value="FORM 3" name="btn_form3" > — shimo
– shimo, Commented Jul 20, 2017 at 20:15
you edited my question first before me so that i cant change my question haha sorry :( — shimo
– shimo, Commented Jul 20, 2017 at 20:16

Luple · Accepted Answer · 2017-07-20 20:19:51Z

1

What you want to do is every time a checkbox is checked, you want to see if both checkboxes are currently checked.

To do this its something like

$( "input:checkbox" ).on("change", function(){
   var checked = false;
   if($("#input1).prop("checked"))
      checked = true;
   if($("#input2).prop("checked"))
      checked = true;
   if(!checked)
      button.prop("disabled",true);
}

answered Jul 20, 2017 at 20:19

Luple

4916 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Monkey_Dev1400 · Accepted Answer · 2017-07-20 20:16:44Z

0

Just add onclick() with your function.

function validate(){
var time12 = document.getElementById("time12").checked;
var time24 = document.getElementById("time24").checked;

if((time12 == "") && ( time24 == "") )
{
	alert("Choose your hour rate");
	return false;
}
	return true;
}

<input id="time12"  type="checkbox" name="time12" value="12"   />12hours
<input id="time24"  type="checkbox" name="time24" value="24"   />24hours

<button onclick="validate()" >submit</button>

answered Jul 20, 2017 at 20:16

Monkey_Dev1400

1,0447 silver badges14 bronze badges

5 Comments

David Somekh Over a year ago

According to the post, some button should get disabled

shimo Over a year ago

but is it possible to put this in my PHP file? because I have two number attributes and if this two numbers have a same variable i want to disable the <input id="time24" type="checkbox" name="time24" value="24" />24hours

shimo Over a year ago

this number attributes <Input id="chiD" name="chiD" type="number" min="<?php echo $_SESSION["day_today"]; ?>" max="<?php echo $_SESSION["day_count"]; ?>" value = "<?php $_SESSION["chiD"] ?>" required> is from file one this is the fiirst number

shimo Over a year ago

and this one is the second one from file 2.php <Input id="choD" name=" choD" type="number" min="<?php echo $_SESSION["day_todayz"]; ?>" max="<?php echo $_SESSION["day_countz"]; ?>" required>

Monkey_Dev1400 Over a year ago

I haven't dealt with php too much, but I'm sure you can added to your php file. You should write another question for the php.

Rory McCrossan · Accepted Answer · 2017-07-20 20:19:51Z

To make this work you need to attach an event handler to the change event of the checkboxes. You can then enable/disable the button based on the checked state of the elements. Try this:

$('.hours').change(function() {
   $('#btn').prop('disabled', !$('.hours:checked').length);
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <input id="time12" type="checkbox" name="time12" value="12" class="hours" />
  12hours
</label>
<label>
  <input id="time24" type="checkbox" name="time24" value="24" class="hours" />
  24hours
</label>
<input type="submit" value="FORM 3" name="btn_form3" id="btn" />

Note that I added a class of hours to the checkboxes and an id of #btn to the button, simply to make selecting the elements easier.

David Somekh · Accepted Answer · 2017-07-20 20:23:13Z

0

See this example: https://codepen.io/anon/pen/bRXMpx

<script>
function validate(){
var time12 = document.getElementById("time12").checked;
var time24 = document.getElementById("time24").checked;

if((time12 == "") && ( time24 == "") )
{
    document.getElementById("btn").disabled = true;
    alert("Choose your hour rate");
    return false;
}
else
document.getElementById("btn").disabled = false;
    return true;
}
</script>
<html>
<input id="time12"  type="checkbox" onclick="validate()" name="time12" value="12"   />12hours
<input id="time24"  type="checkbox" onclick="validate()" name="time24" value="24"   />24hours
<input type="submit" id="btn" value="FORM 3" onclick="validate()" name="btn_form3" > 
</html>

answered Jul 20, 2017 at 20:23

David Somekh

9734 gold badges14 silver badges39 bronze badges

Collectives™ on Stack Overflow

how to validate two checkbox in javascript

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related