How to forbid unchecking checkbox's element?

Question

Is it possible to forbid some action on checkbox? For example I want to leave $('#post-id') and $('#activation') checkboxes always checked, without any possibilities to uncheck them?

$("#activation").attr("checked", true);
$("#post-id").attr("checked", true);

My example you can find here: https://jsfiddle.net/9LzLm9hx/1/

Why not simply set the checkbox to disabled? This will stop the user clicking it, still allow its value to be submitted in a form, but also indicate to the user they can't interact with it. If you use some JavaScript to prevent it being unchecked they may perceive it as a bug as the UI doesn't indicate to them its non-intractable. EDIT: You will however have to have some validation where you use it, as potentially the user can 'un disable' it by simply opening dev tools. — ste2425, Dec 02 '15 at 10:26
If you don't want to disable them however for some reason, here's a working example: https://jsfiddle.net/8zwoumtg/ — Jodi Supporter, Dec 02 '15 at 10:34
@gearsdigital Readonly does not have any effect on checkboxes - you don't change their values, only their 'checked' state. See here: http://stackoverflow.com/questions/155291/can-html-checkboxes-be-set-to-readonly — Jodi Supporter, Dec 02 '15 at 10:37

score 3 · Accepted Answer · answered Dec 02 '15 at 10:24

You can use like this

      $( '#common' ).on('click', function () {
        $( '.common-inputs [type="checkbox"]:not([disabled])' ).prop('checked', this.checked); 
      });

//checkbox
            $("#activation").attr("checked", true);
      $("#post-id").attr("checked", true);
      $("#activation").attr("disabled", true);
      $("#post-id").attr("disabled", true);

score 0 · Answer 2 · answered Dec 02 '15 at 10:29

0

You can simply add disabled to the checkboxes in question. They then have their default value, however, will not be editable anymore.

These are the changes in question:

<input type="checkbox" id="activation" name="check" disabled/>

This would be your updated jsfiddle: https://jsfiddle.net/9LzLm9hx/2/

Enjoy :)

answered Dec 02 '15 at 10:29

Philipp Meissner

5,273
5
34
59

this will be edited by the function in the click event, you're missing a selector in your fiddle – Shakawkaw Dec 02 '15 at 10:32
Oh, did not know about this @gearsdigital. One could however simply put a hidden field with default values that then do transmit the data :) – Philipp Meissner Dec 02 '15 at 10:36
@gearsdigital No, readonly does not do *anything* for checkboxes. Readonly only prevents the user from changing the value, but when you check checkboxes you change their checked state - their value remains the same. – Jodi Supporter Dec 02 '15 at 10:40

score 0 · Answer 3 · edited Dec 12 '15 at 03:14

0

You can use this code snippet after checked true.

<script>
function HideandDisabled(){
    $("#activation").attr("checked", true);
    document.getElementById("activation").disabled=true;
    $("#post-id").attr("checked", true);
    document.getElementById("post-id").disabled=true;
}
</script>

edited Dec 12 '15 at 03:14

Pang

9,564
146
81
122

answered Dec 02 '15 at 10:35

Tanmay

590
8
20

How to forbid unchecking checkbox's element?

3 Answers3