1

I have troubles to show an alert when a button (actually an input type=image object) is disabled because user should first to click on a terms checkbox. This is my jQuery code:

$('#divButton').on("click", function() {
    if ($('#buybutton').prop('disabled', true)) {
        alert('Please confirm . . .');
    }
});

And this is the HTML code:

    <form>
      ...
        <div id="divButton">
            <input type="image" id="buybutton"...

        </div>
    </form>

When buybutton is disabled and I click inside divButton (over disabled button for example) nothing happens.

I am a mobile developer trying to write JavaScript code, so be patient with me.

What am I doing wrong?

EDIT: Debugging it on Chrome, when buybutton is disabled it is never entering inside divButton's click handler function to check 

if ($('#buybutton').prop('disabled', true)).

Looks like onClick event in that div be disabled.

lm2a
  • 835
  • 1
  • 10
  • 19
  • 2
    `if($('#buybutton').prop('disabled', true))` that is saying set disabled to true and it make sure the jQuery object is truthy.... It is not checking to see if it is disabled – epascarello Nov 27 '19 at 22:20
  • Also not sure how you are clicking on a disabled button..... The event does not bubble up from the button. – epascarello Nov 27 '19 at 22:21
  • Would you be better off using `` where `.buyButton` in the `CSS` sets the background of the button to whatever "buy" image you want. From there, you can just create a `function buyEvent() { }` and do whatever logic you want? – EGC Nov 27 '19 at 22:35
  • Why wrap the image button in a div in the first place? Clicking a disabled button doesn't trigger a click event, so it looks like you're making this more complicated than it needs to be: https://jsfiddle.net/khrismuc/nrc809Ly/ –  Nov 27 '19 at 22:59
  • @EGC `input type="image"` was created for precisely the use case the OP is using it for; namely, an image with button semantics. You can add `onclick="buyEvent()"` to an `input type="image"` and it will work the same as adding the same to an `input type="button"`. – Heretic Monkey Nov 28 '19 at 01:21
  • It seems like what you want is a disabled button, but to allow the user to click on it, and then show a warning before the "disabled" part kicks in. If that's the case, just leave the button enabled, but set some other property (say, `.attr('data-disabled', true)` or `data-disabled="true"` in HTML) and check that value in your click event handler. If it's true, show your warning and return. If it's false, do whatever your button is supposed to do when enabled. – Heretic Monkey Nov 28 '19 at 01:25

1 Answers1

0

best approach is Pat Dobson's recipe, is not exactly the same than I was trying to do, but can works:

Make alert window when clicking a disabled button

Thanks for your help, guys ;-)

lm2a
  • 835
  • 1
  • 10
  • 19