How can I make a checkbox readonly not disabled

Question

I have a form where I have to post form values to my action class  In this form I have a checkbox that needs to be readonly  I tried setting disabled  true  but that doesn t work when posting to the action class    So please advice

User · Answer

document getElementById  your checkbox id   disabled true

User · Answer

Through CSS    lt label for    gt     lt input type  checkbox  style  pointer-events  none  tabindex  -1   checked gt  Label  lt  label gt    pointer-events not supported in IE lt 10  https   jsfiddle net fl4sh 3r0v8pug 2

User · Answer

You can easily do this by css  HTML     lt form id  aform  name  aform  method  POST  gt       lt input name  chkBox 1  type  checkbox  checked value  1  readonly   gt       lt br  gt       lt input name  chkBox 2  type  checkbox  value  1  readonly   gt       lt br  gt       lt input id  submitBttn  type  button  value  Submit  gt   lt  form gt    CSS    input type  checkbox   readonly      pointer-events  none      Demo

User · Answer

lt input type  checkbox  checked onclick  return false   onkeydown  return false    gt    http   jsfiddle net 2srjc   If you are worried about tab order  only return false for the keydown event when the tab key was not pressed    lt input type  checkbox  checked onclick  return false   onkeydown  e   e    window event  if e keyCode     9  return false    gt    http   jsfiddle net 2srjc 149

User · Answer

There is no property to make the checkbox readonly  But you can try this trick    lt input type  checkbox  onclick  return false    gt    DEMO

User · Answer

In my case  i only needed it within certain conditions  and to be done easily in HTML   lt input type  quot checkbox quot   style pointer-events   quot  condition    true     none     auto  quot  gt    Or in case you need this consistently   lt input type  quot checkbox quot  style  quot pointer-events  none  quot  gt

User · Answer

You may simply add onclick  return false  - this will stop browser executing default action  checkbox checked not checked will not be changed

User · Answer

Make a fake checkbox with no name and value  force the value in an hidden field    lt input type  checkbox  disabled  disabled  checked  checked  gt   lt input type  hidden  name  name  value  true  gt    Note  if you put name and value in the checkbox  it will be anyway overwritten by the input with the same name

User · Answer

I personally like to do it this way    lt input type  checkbox  name  option  value  1  disabled  disabled    gt   lt input type  hidden  name  option  value  1  gt    I think this is better for two reasons    User clearly understand that he can t edit this value The value is sent when submitting the form

User · Answer

I use JQuery so I can use the readonly attribute on checkboxes      This will make all read-only check boxes truly read-only    input type  checkbox   readonly    on  click readonly   function event  event preventDefault      css  opacity    0 5      If you want the checkbox to be editable again then you need to do the following for the specific checkbox      specific checkbox   off   readonly   removeAttr  readonly   css  opacity    1

User · Answer

None of the above worked for me  Here s my vanilla js solution     function         function handleSubmit event            var form   event target          var nodes   form querySelectorAll  input disabled             for  var node of nodes                node disabled   false                       function init             var submit form tag   document getElementById  new whatever            submit form tag addEventListener  submit   handleSubmit  true              window onload   init beworst           Be sure to provide an appropriate replacement for the form id   My application has a bit of context  where some boxes are pre-checked  and others you have a limit of how many of the other boxes you can check  When you hit that limit  all the non-pre-checked boxes are disabled  and if you uncheck one all the non-pre-checked boxes are enabled again  When the user presses submit all the checked boxes are submitted to the user  regardless of whether they re pre-checked or not

[javascript] How can I make a checkbox readonly? not disabled?

Examples related to javascript

Examples related to checkbox