jquery/javascript input checkbox checked attribute (readonly not working)

Question

Why is the checked attribute not visible in the DOM?

In the onchange input.val() is always on, but the checked attribute is changing??

input.change(_=> {
    console.log('val:', input.val(), ', checked:', input.prop('checked'));
});

console

val: on , checked: true
val: on , checked: false
val: on , checked: true
val: on , checked: false

readonly not working

If the input checkbox is readonly I can still change the value and when clicking the checkbox gives the same output in console

Rory McCrossan · Accepted Answer · 2022-06-23 08:59:27Z

1

The value of a radio or checkbox element doesn't change (unless you do it programmatically, but we're talking about simple user interaction with the form here).

When you check the radio/checkbox only the checked property changes. It's this property which should determine what action you take when your user interacts with the form.

Why is the checked attribute not visible in the DOM?

This is because it's the checked property of the Element object which is being updated, not the checked attribute. If you want to update the DOM change prop() to attr() in you JS code, but note that this is slower and serves no useful purpose in this case.

There is a very good answer here which goes in to detail on the difference between properties and attributes in JavaScript, which may help to clear up any confusion.

edited Jun 23, 2022 at 8:59

answered Jun 23, 2022 at 8:50

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

Collectives™ on Stack Overflow

jquery/javascript input checkbox checked attribute (readonly not working)

readonly not working

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

readonly not working

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related