Event on a disabled input

Question

Apparently a disabled  lt input gt  is not handled by any event  Is there a way to work around this issue     lt input type  text  disabled  disabled  name  test  value  test    gt        input   click function            this  removeAttr  disabled         Here  I need to click on the input to enable it  But if I don t activate it  the input should not be posted

User · Answer

Instead of disabled  you could consider using readonly  With some extra CSS you can style the input so it looks like an disabled field   There is actually another problem  The event change only triggers when the element looses focus  which is not logic considering an disabled field  Probably you are pushing data into this field from another call  To make this work you can use the event  bind       form   bind  change    input   function          console log  Do your thing

User · Answer

suggestion here looks like a good candidate for this question as well   Performing click event on a disabled element  Javascript jQuery  jQuery  input submit   click function e        if   something                     return false

User · Answer

Maybe you could make the field readonly and on submit disable all readonly fields    quot  myform quot   submit function e         quot input readonly  quot   prop  quot disabled quot   true        and the input    script  should be  lt input type  quot text quot  readonly  quot readonly quot  name  quot test quot  value  quot test quot    gt      input readonly    click function          this  removeAttr  readonly         A live example   x000D   x000D      myform   submit function e         input readonly    prop  disabled   true     e preventDefault              reset   click function           input readonly    prop  disabled   false          input readonly    click function          this  removeAttr  readonly       x000D  input readonly      color  gray    border-color  currentColor    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt form class  myform  gt     lt input readonly  readonly  value  test    gt     lt input readonly  readonly  value  test    gt     lt input readonly  readonly  value  test    gt     lt input readonly  readonly  value  test    gt     lt input readonly  readonly  value  test    gt     lt input readonly  readonly  value  test    gt     lt input readonly  readonly  value  test    gt     lt input readonly  readonly  value  test    gt     lt input readonly  readonly  value  test    gt        lt button gt Submit lt  button gt     lt button class  reset  type  button  gt Reset lt  button gt   lt  form gt  x000D   x000D   x000D

User · Answer

Disabled elements don t fire mouse events   Most browsers will propagate an event originating from the disabled element up the DOM tree  so event handlers could be placed on container elements   However  Firefox doesn t exhibit this behaviour  it just does nothing at all when you click on a disabled element   I can t think of a better solution but  for complete cross browser compatibility  you could place an element in front of the disabled input and catch the click on that element   Here s an example of what I mean    lt div style  display inline-block  position relative   gt     lt input type  text  disabled   gt     lt div style  position absolute  left 0  right 0  top 0  bottom 0   gt  lt  div gt   lt  div gt     jq      div  gt  div   click function  evt          this  hide   prev  input disabled    prop  disabled   false  focus           Example  http   jsfiddle net RXqAm 170   updated to use jQuery 1 7 with prop instead of  attr

User · Answer

I would suggest an alternative - use CSS   input disabled       user-select   none      -moz-user-select   none      -webkit-user-select   none      color  gray      cursor  pointer      instead of the disabled attribute  Then  you can add your own CSS attributes to simulate a disabled input  but with more control

User · Answer

OR do this with jQuery and CSS      input disabled   attr  ignore   true   css        pointer-events   none         color    gray        This way you make the element look disabled and no pointer events will fire  yet it allows propagation and if submitted you can use the attribute  ignore  to ignore it

User · Answer

I find another solution    lt input type  text  class  disabled  name  test  value  test    gt    Class  disabled  immitate disabled element by opacity        lt style type  text css  gt      input disabled           opacity  0 5         lt  style gt    And then cancel the event if element is disabled and remove class     document  on  click   input disabled  function event        event preventDefault          this  removeClass  disabled

User · Answer

Disabled elements  eat  clicks in some browsers - they neither respond to them  nor allow them to be captured by event handlers anywhere on either the element or any of its containers   IMHO the simplest  cleanest way to  fix  this  if you do in fact need to capture clicks on disabled elements like the OP does  is just to add the following CSS to your page   input disabled   pointer-events none    This will make any clicks on a disabled input fall through to the parent element  where you can capture them normally    If you have several disabled inputs  you might want to put each into an individual container of its own  if they aren t already laid out that way - an extra  lt span gt  or a  lt div gt   say - just to make it easy to distinguish which disabled input was clicked      The downside is that this trick unfortunately won t works for older browsers that don t support the pointer-events CSS property    It should work from IE 11  FF v3 6  Chrome v4   caniuse com  search pointer-events  If you need to support older browsers  you ll need to use one of the other answers

User · Answer

x000D   x000D    function     x000D   x000D       input disabled   closest  div   click function     x000D        this  find  input disabled   attr  disabled   false  focus    x000D        x000D   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 7 2 jquery min js  gt  lt  script gt  x000D   x000D   lt div gt  x000D     lt input type  text  disabled   gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

We had today a problem like this  but we didn t wanted to change the HTML  So we used mouseenter event to achieve that  var doThingsOnClick   function            your click function here       document  on        mouseenter   function                this  removeAttr  disabled   bind  click   doThingsOnClick               mouseleave   function                this  unbind  click   doThingsOnClick  attr  disabled    disabled               input disabled

[javascript] Event on a disabled input

Examples related to javascript

Examples related to jquery

Examples related to html