-2

I have created a button with the help of <div>. Now I want to disable that button like a normal asp button... How can i do this with the help of jQuery?

function createButton(buttonName) {
    var buttonHtml = '<div id=' + buttonName + ' class="dynamicButton" onclick="' + buttonResources[buttonName + 'OnClick'] + '">' + '<div id="' + buttonName + 'Div" class="buttonImage"><img id="' + buttonName + 'Img" src="' + buttonResources[buttonName + 'Image'] + '"></div>' + '<div class="buttonCaption">' + '<label  class= "pointerCursor" id="' + buttonName + 'LabelDiv">' + buttonResources[buttonName + 'Caption'] + ' </label>' + '</div>' + '</div>';
    var panelName = buttonResources[buttonName + 'Panel'];
    if ($('#' + panelName + '').length == 0) {
        createNewPanel(panelName);
    }
    addButtonToPanel(panelName, buttonHtml, buttonName);
}
George
  • 36,413
  • 9
  • 66
  • 103
Shruti Singh
  • 71
  • 1
  • 10
  • 3
    why using a div? You can style/manipulate an actual button too – Rene Pot Jul 30 '13 at 09:59
  • 2
    possibly duplicate `http://stackoverflow.com/questions/16902734/how-can-i-disable-a-div-acting-like-a-submit-button-after-it-is-clicked-once` – Neeraj Dubey Jul 30 '13 at 09:59
  • 2
    @NeerajDubey please don't post link as `code` it makes the link un-clickable. – bansi Jul 30 '13 at 10:03
  • also, adding elements like this on the fly becomes difficult to manage down the line (hard lesson personally learned). checkout MVVM frameworks (like knockoutjs). not quite sure why there's a downvote on my post below, but it include disabling the click event. – obimod Jul 30 '13 at 10:05
  • I am not using the buttons.... – Shruti Singh Aug 01 '13 at 05:18

4 Answers4

0

you can either use a <button> element or use the css pointer-events: none; to disable all the mouse events.

But, as expected, the css wont work in IE

Akhil Sekharan
  • 12,467
  • 7
  • 40
  • 57
0

You can add an attribute to this div (ex: disabled) and test it on the click event to do the right action

Gaetan
  • 66
  • 1
  • 6
0

You can do it with css. You need to another div along with it and add a class which applies the opacity of 0.5 and positioned over the button div.

Sai Chaithanya
  • 708
  • 1
  • 7
  • 14
-1

Assuming you change that div element into a button element to conform to HTML standards, you can disable the button via jQuery...

$("#" + buttonName).attr('disabled','disabled');

...and perhaps remove the click event...

$("#" + buttonName).off('click');
obimod
  • 797
  • 10
  • 26