How to check whether link button is disabled or not

Question

After rendering code in browser the anchor tag is generated as

<a onclick="alert();" id="ctl00_RightContent_lnkSaveTop" title="Select Mail then Click to Send..." class="btn btn-u" data-rel="tooltip" data-container="body" data-toggle="popover" data-placement="top" data-content="Select Mail then Click to Send..." href="javascript:__doPostBack('ctl00$RightContent$lnkSaveTop','')" style="float: right" data-original-title="Send Email" disabled="disabled">
  Send Mail
</a>

I have written jquery as below lines of code

$(document).ready(function () {
  $('#<%= lnkSaveTop.ClientID%>').click(function () {
    if ($(this).is(':disabled')) {
      alert('No need to click, it\'s disabled.');
    }
  });
});

Basically I want that if disabled button is clicked, then the tooltip should be displayed.

replace this #<%= lnkSaveTop.ClientID%> with "#ctl00_RightContent_lnkSaveTop" — Mehmet Eren Yener, Sep 16 '15 at 11:29
Firefox, and perhaps other browsers, disable DOM events on form fields that are disabled. — sajanyamaha, Sep 16 '15 at 11:31
Can you even click a button that's disabled? AFAIK it stops propogating instantly therefore nothing would happen — StudioTime, Sep 16 '15 at 11:31
Use `readonly="readonly"` instead of `disabled="disabled"` as [Disabled elements don't fire mouse events.](http://stackoverflow.com/questions/3100319/event-on-a-disabled-input) — D4V1D, Sep 16 '15 at 11:34
$('#ctl00_RightContent_lnkSaveTop').attr("disabled") == "disabled" — Dima Gimburg, Sep 16 '15 at 11:36
The above link has three different js events bound to it's click - the onclick attribute, the js click in the href and then your jquery click — Pete, Sep 16 '15 at 12:26

score 0 · Answer 1 · answered Sep 16 '15 at 11:39

0

Try:

 if ($(this).attr('disabled') === "disabled") {
      alert('No need to click, it\'s disabled.');
    }

if you intend to use readonly attribute, it's the same, replace 'disabled' with 'readonly '

answered Sep 16 '15 at 11:39

Anudeep Rentala

150
1
6

score 0 · Answer 2 · answered Sep 16 '15 at 11:48

What you can do is have a custom data attribute on your input button which is a blank string. Then when the mouse enters the button you remove the title and place it inside of your empty data attribute and remove title, this will stop the tooltip from appearing. You then listen for the click even on the input and then move copy the text from the data attribute to the title and that should do the trick

Here is my jsFiddle : https://jsfiddle.net/44vof888/

jQuery

$(function () {
    $('input').mouseenter(function () {
        $(this).data('title', this.title)
        this.title = '';
    });

    $('input').on('click', function () {
        this.title = $(this).data('title');
    });
});

html

<input type="button" data-title="" value="Hello" title="Half an update" readonly="readonly"></input>

How to check whether link button is disabled or not

2 Answers2