Deny to change the state of checkbox

Question

I need to deny to change the state of any checkbox:

window.doNotChange = function(event) {
  e = event || window.event;
  if (e) {
    e.stopPropagation();
    e.preventDefault();
    var t = $(e.target);
    t.prop({checked: typeof t.attr('checked') != 'undefined'});
  }
  alert('Deny to change THIS checkbox!');
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><label><input type="checkbox" checked onchange="doNotChange(event)"> name 1 (readonly)</label></p>
<p><label><input type="checkbox" onchange="doNotChange(event)"> name 2 (readonly)</label></p>
<p><label><input type="checkbox" checked> name 3 (editable)</label></p>
<p><label><input type="checkbox" checked onchange="doNotChange(event)"> name 4 (readonly)</label></p>
<p><label><input type="checkbox"> name 5 (editable)</label></p>
<p>etc.</p>

This code works. But is there a better solution?

I am embarrassed by this code: t.prop({checked: typeof t.attr('checked') != 'undefined'}); — Волошенко Олег, Nov 22 '14 at 17:23
Any checkboxes, in which I added onchange-event, must be readonly. And on click them must be an alert. — Волошенко Олег, Nov 22 '14 at 20:49

score 3 · Answer 1 · answered Nov 22 '14 at 17:21

3

Just use HTML's disabled attribute:

<input type="checkbox" disabled />

answered Nov 22 '14 at 17:21

David Thomas

249,100
51
377
410

Because `readonly` only prevents changes to the *`value`* of an ``, it doesn't prevent changes to the *state* (`checked` or not). Sadly. See the Q&A here: http://stackoverflow.com/questions/155291/can-html-checkboxes-be-set-to-readonly – David Thomas Nov 22 '14 at 17:26
I may be incorrectly set the task. I need to display a message on click to the checkbox. And disabled is not suitable for me. – Волошенко Олег Nov 22 '14 at 21:49
@ВолошенкоОлег you can display a message on click by binding on click. – Tim Seguine Nov 22 '14 at 22:20
"disabled" attribute disables "onclick" event too – Волошенко Олег Nov 25 '14 at 13:55

score 0 · Answer 2 · answered Nov 22 '14 at 17:21

0

How about just simple disable the ones you don't wan't changes on:

document.getElementById("your_field_id").disabled = true;

answered Nov 22 '14 at 17:21

olegaarde

31
3

"disabled" property is not suitable for me. I did it in the first place – Волошенко Олег Nov 22 '14 at 21:52

Волошенко Олег · Answer 3 · 2014-11-23T07:11:13.720

Now, I see only one solution: to transfer the element and the default value to the function

window.doNotChange=function(el,v){
 $(el).prop({checked:v});
 alert('Can\'t touch this');
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><label><input type="checkbox" checked onchange="doNotChange(this,1)"> name 1 (readonly)</label></p>
<p><label><input type="checkbox" onchange="doNotChange(this,0)"> name 2 (readonly)</label></p>
<p><label><input type="checkbox" checked> name 3 (editable)</label></p>
<p><label><input type="checkbox" checked onchange="doNotChange(this,1)"> name 4 (readonly)</label></p>
<p><label><input type="checkbox"> name 5 (editable)</label></p>

Thanks for answers

Deny to change the state of checkbox

3 Answers3