how to POST Submit an Input Checkbox that is disabled

Question

I have a checkbox that  given certain conditions  needs to be disabled  Turns out HTTP doesn t post disabled inputs   How can I get around that  submitting the input even if it s disabled and keeping the input disabled

User · Answer

If you re happy using JQuery then remove the disabled attribute when submitting the form      form   submit function            input   removeAttr  disabled

User · Answer

Unfortunately there is no  simple  solution  The attribute readonly cannot be applied to checkboxes  I read the W3 spec about the checkbox and found the culprit   If a control doesn t have a current value when the form is submitted  user agents are not required to treat it as a successful control   http   www w3 org TR html401 interact forms html h-17 13 2   This causes the unchecked state and the disabled state to result in the same parsed value    readonly  readonly  is not a valid attribute for checkboxes  onclick  event preventDefault     is not always a good solution as it s triggered on the checkbox itself  But it can work charms in some occasions  Enabling the checkbox onSubmit is not a solution because the control is still not treated as a successful control so the value will not be parsed  Adding another hidden input with the same name in your HTML does not work because the first control value is overwritten by the second control value as it has the same name    The only full-proof way to do this is to add a hidden input with the same name with javascript on submitting the form   You can use the small snippet I made for this   function disabled checkbox       var theform   document forms 0     var theinputs   theform getElementsByTagName  input      var nrofinputs   theinputs length    for var inputnr 0 inputnr lt nrofinputs inputnr          if theinputs inputnr  disabled  true          var thevalueis   theinputs inputnr  checked  true  on            var thehiddeninput   document createElement  input          thehiddeninput setAttribute  type   hidden          thehiddeninput setAttribute  name  theinputs inputnr  name         thehiddeninput setAttribute  value  thevalueis         theinputs inputnr  parentNode appendChild thehiddeninput                 This looks for the first form in the document  gathers all inputs and searches for disabled inputs  When a disabled input is found  a hidden input is created in the parentNode with the same name and the value  on   if it s state is  checked   and     if it s state is    - not checked    This function should be triggered by the event  onsubmit  in the FORM element as    lt form id  ID  action  ACTION  onsubmit  disabled checkbox     gt

User · Answer

lt html gt       lt head gt       lt script type  text javascript  gt      function some name    if  document getElementById  first   checked       document getElementById  second   checked false  else document getElementById  second   checked true         lt  script gt       lt  head gt       lt body onload  some name     gt       lt form gt       lt input type  checkbox  id  first  value  first  onclick  some name      gt first lt br  gt       lt input type  checkbox  id  second  value  second  onclick  some name       gt second      lt  form gt       lt  body gt   lt  html gt    Function some name is an example of a previous clause to manage the second checkbox which is checked  posts its value  or unchecked  does not post its value  according to the clause and the user cannot modify its status  there is no need to manage any disabling of second checkbox

User · Answer

Here is another work around can be controlled from the backend   ASPX   lt asp CheckBox ID  Parts Return Yes  runat  server  AutoPostBack  false    gt    In ASPX CS  Parts Return Yes InputAttributes  disabled      disabled   Parts Return Yes InputAttributes  class      disabled-checkbox     Class is only added for style purposes

User · Answer

create a css class eg     disable          pointer-events  none          opacity  0 5      apply this class instead of disabled attribute

User · Answer

Don t disable it  instead set it to readonly  though this has no effect as per not allowing the user to change the state  But you can use jQuery to enforce this  prevent the user from changing the state of the checkbox      input type  checkbox   readonly  readonly     click function e       e preventDefault          This assumes that all the checkboxes you don t want to be modified have the  readonly  attribute  eg    lt input type  checkbox  readonly  readonly  gt

User · Answer

I just combined the HTML  JS and CSS suggestions in the answers here  HTML    lt input type  checkbox  readonly gt    jQuery    function           Raj  https   stackoverflow com a 14753503 260665       document  on  click    input type  checkbox   readonly    function e           e preventDefault                    CSS   input type  checkbox   readonly      cursor  not-allowed    opacity  0 5      Since the element is not  disabled  it still goes through the POST

User · Answer

Adding onclick  this checked true Solve my problem  Example      lt input type  checkbox  id  scales  name  feature    value  scales  checked  checked  onclick  this checked true    gt

User · Answer

You can keep it disabled as desired  and then remove the disabled attribute before the form is submitted       myForm   submit function            checkbox   removeAttr  disabled

User · Answer

lt input type  checkbox  checked  checked  onclick  this checked true    gt    I started from the problem   how to POST Submit an Input Checkbox that is disabled   and in my answer I skipped the comment   If we want to disable a checkbox we surely need to keep a prefixed value  checked or unchecked  and also we want that the user be aware of it  otherwise we should use a hidden type and not a checkbox    In my answer I supposed that we want to keep always a checkbox checked and that code works in this way  If we click on that ckeckbox it will be forever checked and its value will be POSTED Submitted  In the same way if I write     onclick  this checked false  without checked  checked   note  default is unchecked  it will be forever unchecked and its value will be not POSTED Submitted

User · Answer

The simplest way to this is    lt input type  checkbox  class  special  onclick  event preventDefault     checked   gt    This will prevent the user from being able to deselect this checkbox and it will still submit its value when the form is submitted  Remove checked if you want the user to not be able to select this checkbox   Also  you can then use javascript to clear the onclick once a certain condition has been met  if that s what you re after   Here s a down-and-dirty fiddle showing what I mean  It s not perfect  but you get the gist   http   jsfiddle net vwUUc

User · Answer

Since    setting readonly attribute to checkbox isn t valid according to HTML specification   using hidden element to submit value isn t very pretty way and setting onclick JavaScript that prevents from changing value isn t very nice too   I m gonna offer you another possibility    Set your checkbox as disabled as normal  And before the form is submitted by user enable this checkbox by JavaScript    lt script gt      function beforeSumbit             var checkbox   document getElementById  disabledCheckbox            checkbox disabled   false         lt  script gt       lt form action  myAction do  method  post  onSubmit  javascript  beforeSubmit     gt       lt checkbox name  checkboxName  value  checkboxValue  disabled  disabled  id  disabledCheckbox    gt       lt input type  submit   gt   lt  form gt    Because the checkbox is enabled before the form is submitted  its value is posted in common way  Only thing that isn t very pleasant about this solution is that this checkbox becomes enabled for a while and that can be seen by users  But it s just a detail I can live with

User · Answer

UPDATE  READONLY doesn t work on checkboxes  You could use disabled  disabled  but at this point checkbox s value will not appear into POST values  One of the strategy is to add an hidden field holding checkbox s value within the same form and read value back from that field  Simply change disabled to readonly

User · Answer

I ve solved that problem   Since readonly  readonly  tag is not working  I ve tried different browsers   you have to use disabled  disabled  instead  But your checkbox s value will not post then     Here is my solution   To get  readonly  look and POST checkbox s value in the same time  just add a hidden  input  with the same name and value as your checkbox  You have to keep it next to your checkbox or between the same  lt form gt  lt  form gt  tags    lt input type  checkbox  checked  checked  disabled  disabled  name  Tests  value  4  gt SOME TEXT lt  input gt    lt input type  hidden  id  Tests  name  Tests  value  4    gt    Also  just to let ya ll know readonly  readonly   readonly  true   readonly     or just READONLY will NOT solve this  I ve spent few hours to figure it out   This reference is also NOT relevant  may be not yet  or not anymore  I have no idea   http   www w3schools com tags att input readonly asp

User · Answer

This works like a charm    Remove the  disabled  attributes Submit the form Add the attributes again  The best way to do this is to use a setTimeOut function  e g  with a 1 millisecond delay     The only disadvantage is the short flashing up of the disabled input fields when submitting  At least in my scenario that isn  t much of a problem      form   bind  submit   function        var  inputs     this  find   input          disabledInputs              curInput        remove attributes   for  var i   0  i  lt   inputs length  i           curInput      inputs i         if   curInput attr  disabled       undefined           curInput removeAttr  disabled          disabledInputs push true         else        disabledInputs push false             add attributes   setTimeout function         for  var i   0  i  lt   inputs length  i             if  disabledInputs i      true             inputs i   attr  disabled   true               1

User · Answer

There is no other option other than a hidden field  so try to use a hidden field like demonstrated in the code below    lt input type  hidden  type  text  name  chk1    id  tasks  value  xyz   gt   lt input class  display checkbox  type  checkbox  name  chk1    id  tasks  value  xyz  checked  check   disabled  disabled   gt Tasks

User · Answer

Add onsubmit  this   nameofyourcheckbox    disabled false  to the form

User · Answer

You could handle it this way    For each checkbox  create a hidden field with the same name attribute  But set the value of that hidden field with some default value that you could test against  For example     lt input type  checkbox  name  myCheckbox  value  agree    gt   lt input type  hidden  name  myCheckbox  value  false    gt    If the checkbox is  checked  when the form is submitted  then the value of that form parameter will be   agree false    If the checkbox is not checked  then the value would be      false    You could use any value instead of  false   but you get the idea

[html] how to POST/Submit an Input Checkbox that is disabled?

Examples related to html

Examples related to forms

Examples related to html-input