Button clickable even though disabled

Question

I have this code below to disable the buttons, its disabled. When I mouse over, it shows the crossed round icon, so all good. However, the issue is, when I click, behind the scene, it invokes click action or things that we expect to see on clicking when its not disabled.

I browsed the net and didn't fnd any solution except change from attr to prop. I am going to do this now and see, but sadly it works fine in Deb and not in UAT.

Any help please?

$("#IsMarriedlbl").attr("disabled", true);
$("#IsSinglelbl").attr("disabled", true);
$("#IsWidowedlbl").attr("disabled", true);
$("#Divorcedlbl").attr("disabled", true);

could you please post some html and the code for click event? — Ashkan Mobayen Khiabani, Mar 29 '16 at 23:53
@AshkanMobayenKhiabani: How does that interests you? I reckon the correction needs to be done here. You do not have to worry about internal logic but the one that triggers that. I want some options like return false, or stopimmediatepropagation etc? Bad thing is, it works perfectly fine in Dev so I do not want to change this. My question is why not in other environ it doesn't work. — Jasmine, Mar 30 '16 at 00:03
well there might be click a parent element of the disabled button which is being triggered and I can't be sure without seeing the code — Ashkan Mobayen Khiabani, Mar 30 '16 at 00:05
@AshkanMobayenKhiabani: Thank you, but I am afraid I dont know where it is, its a big messy solution. :( — Jasmine, Mar 30 '16 at 00:13
Probably irrelevant, however you should be aware of the difference between `.attr()` and `.prop()` -- `disabled` is a _property_ of an element, controlled by using the _attribute_ `disabled` or `disabled="disabled"`; so when setting it programmatically it is "more correct" to use `.prop('disabled', true)`. There are some cases where changing an attribute after the DOM has been built (parsed) has no effect but changing the property _does_. (but can't remember an example at the moment) — Stephen P, Mar 30 '16 at 00:58

score 0 · Answer 1 · answered Mar 29 '16 at 23:56

0

I am not sure why but IE doesn't prevent the event from bubbling when you click a disabled submit button so you have to handle it in the click event as well. - bit of a nightmare.

If you return false on your click event it will prevent the code from running but still have the disabled effect to the user.

$('#yourClickEvent').click(function( event ) {
    var $isDisabled  = $(event.target);
    if( $isDisabled.is(':submit:disabled') ) {
        return false;
    }
});

answered Mar 29 '16 at 23:56

Josh Stevens

3,943
1
15
22

I saw the ditto statement and code in other question, but doesn't help. – Jasmine Mar 30 '16 at 00:04
it will return false and not allow the user to continue why does that not help.. disabled does not stop the click event on IE so you have to do this, test this in IE in dev and it wont work. – Josh Stevens Mar 30 '16 at 00:07
Hey, its even in Chrome :) – Jasmine Mar 30 '16 at 00:14
Working in Chrome Dev (Haven't checked IE Dev lol)... But testers are after me, damn this silly bug not working in UAT but works fine in Dev :( and Local :( Have no clue, same code. – Jasmine Mar 30 '16 at 00:15
disabled only disables the user integration not the functionality sorry to say this but your going to have to do a check and return false on the click events. wont take long to add to your onclick events. – Josh Stevens Mar 30 '16 at 00:17
Ok I will do as you say and see if that helps – Jasmine Mar 30 '16 at 00:30
it will still trigger the click but your 'return false' will stop any functionality firing if you check at the start of the function. – Josh Stevens Mar 30 '16 at 00:31

score 0 · Answer 2 · edited May 23 '17 at 12:16

0

I'm using an answer I've seen before @ Much thanks to GhiOm for the original answer:

Old Way (pre-1.7):

$('...').attr('onclick','').unbind('click');

New Way (1.7+):

$('...').prop('onclick',null).off('click');

edited May 23 '17 at 12:16

Community

1
1

answered Mar 29 '16 at 23:59

Dresden

549
2
13

you cant steal another question answer from stackoverflow itself lol – Josh Stevens Mar 30 '16 at 00:00
2

I don't really get how it's "stealing" when I'm both linking and crediting the original answer with what I assume is the answer to this problem. It's not like I'm saying "this is mine". – Dresden Mar 30 '16 at 00:07
you should comment with it normally.. not answer it again. – Josh Stevens Mar 30 '16 at 00:09
1

Oh I'm sorry, but StackOverflow requires that I have 50 reputation to comment on an original question. Since I have 16 I am unable to do what you are asking me to do. Thanks for the suggestion though. – Dresden Mar 30 '16 at 00:12
@MikeS: Actually using prop only breaks my code and creates more problem than I have now lol – Jasmine Mar 30 '16 at 04:15
@JoshStevens: I replied him, his answer creates more problem – Jasmine Mar 30 '16 at 04:15

John Slegers · Answer 3 · 2016-03-30T01:21:01.777

If you want to disable both clicking by humans and programmatically generated clicks, you need to do something like this :

$("#IsMarriedlbl")
    .prop('disabled', 'disabled')  // Sets 'disabled' property
    .prop('onclick', null)         // Removes 'onclick' property if found
    .off('click');                 // Removes other events if found

Demo

$("button").on("click", function() {
    alert("clicked!");
});

$("#IsMarriedlbl")
    .prop('disabled', 'disabled')  // Sets 'disabled' property
    .prop('onclick', null)         // Removes 'onclick' property if found
    .off('click');                 // Removes other events if found

$("#IsMarriedlbl").click();
$("#IsMarriedlbl").click();
$("#IsMarriedlbl").click();

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<button id="IsMarriedlbl">Married</button>

Sorry, it doesn't work for me and makes no difference from my code. — Jasmine, Mar 30 '16 at 04:13

score -2 · Answer 4 · answered Mar 30 '16 at 00:06

I don't know why: but here on codepen works fine: Button disabling test

$(document).ready(function() {
  $("#button").attr("disabled", true);

  $("#button").on("click", function() {
    console.log("clicked!");
  });
});

body {
  background-color: #52DD83;
  overflow: hidden;
}
button {
  text-align: center;
}

<html>

<head>
</head>

<body>
  <button id="button">Button</button>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js" </script>
    < /body>
</html >

Button clickable even though disabled

4 Answers4

Demo