Why does jQuery not see a checkbox has been auto checked?

I have some jQuery checking to see when a human clicks a check button but if the page loads with the button marked as checked already, the jQuery doesn't work.

$ (function(){
var requiredCheckboxes = $('.options :checkbox[required]');
requiredCheckboxes.change(function(){
if(requiredCheckboxes.is(':checked')) {
requiredCheckboxes.removeAttr('required');
} else {
requiredCheckboxes.attr('required', 'required');
}
});
});


What I need this to do is if the checkbox is already checked, it removes the required attribute. Why is it not working when a variable is posted to the page and PHP adds checked="checked" to the input?

Thanks!

2 Answers
2

You have to use this as selector on checking if the clicked checkbox is checked or not. this refers to the clicked checkbox. You can use prop() to add and remove required

this

this

prop()

required

var requiredCheckboxes = $('.options');

requiredCheckboxes.change(function() {
if ($(this).is(':checked')) {
$(this).prop('required', false);
} else {
$(this).prop('required', true);
}
});

input:required {
box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='options' type="checkbox" required>
<input class='options' type="checkbox" required>
<input class='options' type="checkbox" required>
<input class='options' type="checkbox" required>

Update: You can use a class for the required checkbox and use prop() to add and remove required property.

prop()

required

var requiredCheckboxes = $('.required-options')

//On page Loads
if (requiredCheckboxes.is(':checked')) {
requiredCheckboxes.prop('required', false);
} else {
requiredCheckboxes.prop('required', true);
}


//Event listener
requiredCheckboxes.change(function() {
if (requiredCheckboxes.is(':checked')) {
requiredCheckboxes.prop('required', false);
} else {
requiredCheckboxes.prop('required', true);
}
});

input:required {
box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='required-options' type="checkbox" required checked>
<input class='required-options' type="checkbox" required>
<input class='required-options' type="checkbox" required>
<input class='required-options' type="checkbox" required>

Html:

<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />


js:

$("document").ready(function(){
$('body').find('input:checkbox').prop('checked', "checked");
});


jsfiddle

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.