Checkbox validation not working

[Genesis]

Hi, I am trying to create a checkbox validation where in when I check the selected checkbox the date field should be fill in before clicking the button.

<script type="text/javascript">
		$(document).ready(function(){
			var Monday = $('input:checked').val() == 'Monday';
			var Tuesday = $('input:checked').val() == 'Tuesday';
			var Wednesday = $('input:checked').val() == 'Wednesday';
			var Thursday = $('input:checked').val() == 'Thursday';
			var Friday = $('input:checked').val() == 'Friday';
			var Saturday = $('input:checked').val() == 'Saturday';
			if( Monday == true && $('.mondaydate1').val() == '' ){
				$('.dateError').html( 'Fill in this field' )
				$("button.date").addClass("disabled");
			}
		});
	</script>


<div class="row ">
										
										<div class="col-md-3">
										<div class="form-group">
										<div class="checkbox">
										<label><input type="checkbox" value="Monday" name="monday[0]">Monday</label>
										</div>
										</div>
										</div>
										
										<div class="col-md-3">
										<div class="form-group"><label for="exampleInputPassword1">Time</label>
											<div class="input-group bootstrap-timepicker timepicker"><input id="timepicker1" type="text" class="form-control input-small mondaydate1" placeholder="00:00 AM/PM" name="mondaydate1[0]">
											<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
											</div>
											<div class="dateError"></div>
										</div>
										</div>
										
										<div class="col-md-3">
										<div class="form-group"><label for="exampleInputPassword1">Time</label>
											<div class="input-group bootstrap-timepicker timepicker"><input id="timepicker1" type="text" class="form-control input-small" placeholder="00:00 AM/PM" name="mondaydate11[0]">
											<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
											</div>
										</div>
										</div>
											
										</div><!-- Monday -->

Please help me.

[Genesis]

Any help?

[Paul_Wilkins]

@Genesis

Any help?

Can we please gain some information about the HTML code for the form that’s being filled in?

[megazoid]

@Genesis

var Monday = $(‘input:checked’).val() == ‘Monday’;

Selector input:checked returns more than one element if you have multiple checkboxes checked.
Better approach:

var Monday = $('input[value="Monday"]').prop('checked');

[Genesis]

@megazoid

var Monday = $(‘input[value=“Monday”]’).prop(‘checked’);

Hi, so this is my html:

<div class="row ">
										
										<div class="col-md-3">
										<div class="form-group">
										<div class="checkbox">
										<label><input id="checkMonday" type="checkbox" value="Monday" name="monday[0]" >Monday</label>
										<p></p>
										</div>
										</div>
										</div>
										
										<div class="col-md-3">
										<div class="form-group"><label for="exampleInputPassword1">Time</label>
											<div class="input-group bootstrap-timepicker timepicker"><input id="timepicker1" type="text" class="form-control input-small mondaydate1" placeholder="00:00 AM/PM" name="mondaydate1[0]">
											<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
											</div>
											<div class="dateError"></div>
										</div>
										</div>
										
										<div class="col-md-3">
										<div class="form-group"><label for="exampleInputPassword1">Time</label>
											<div class="input-group bootstrap-timepicker timepicker"><input id="timepicker1" type="text" class="form-control input-small" placeholder="00:00 AM/PM" name="mondaydate11[0]">
											<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
											</div>
										</div>
										</div>
											
										</div><!-- Monday -->

What I want to achieve is when I check the checkbox the two input fields must be fill in before clicking the submit button. Please help me.

[Genesis]

It’s not working. I still don’t get what am I doing wrong:

<script type="text/javascript">
		$(document).ready(function(){
			var Monday = $('input[value="Monday"]').prop('checked');
			
			if( Monday == true && $('.mondaydate1').val() == '' ){
				$('.dateError').html( 'Fill in this field' );
				$("button.date").addClass("disabled");
			}
		});
	</script>

[megazoid]

When do you want to perform this check?
Now your code works immediately after page loading

[Genesis]

I want it to work when I check the checkbox

[megazoid]

So bind it to the checkbox

$('#checkMonday').change(function(){
    if ($(this).prop('checked') && !$('.mondaydate1').val()){
        $('.dateError').html( 'Fill in this field' );
        $("button.date").addClass("disabled");
    }
});

[Genesis]

yey! it works. Thank you so much .