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

Answer 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.