2

So I have this piece of code:

var delete_disabled = (parseInt(row.attr("data-state"), 10) === serverVars.obligationStateNotStarted) ? '' : 'disabled="disabled"'; newHtml += "<button class=\"delete small\"" + delete_disabled + " title=\"" + labelDelete + "\"><i class=\"icon-trash\"></i></button>";

It checks if a certain criteria is met and if it is then it disables the button however once the button is disabled I would like something still to happen when I click on it? I've tried everything I can think of and was hoping for some suggestions. Thanks in advance :)

Improve this question
6
  • stackoverflow.com/questions/7833854/… This could help you. Commented Dec 19, 2013 at 16:03
  • Play with its layout to give the impression it's disabled, but instead of disabling it, just attach a different handler for the click event. Commented Dec 19, 2013 at 16:03
  • 2
    Don't disable it, make it look like it is disabled (from an user perspective, gray text and background, etc...) and handle its state with a variable or something. Commented Dec 19, 2013 at 16:05
  • That's not disabling a button, that's destroying it by replacing/reparsing it's HTML to have a completly new and different button with a (not even standard) disabled keyboard. Use attribute disabled="disabled" Commented Dec 19, 2013 at 16:07
  • 1
    disable a button and pretend it still does something while disabled is a big "no no" IMHO. Commented Dec 19, 2013 at 16:09

2 Answers 2

Reset to default
2

Alternatively to actually firing an event when clicking the disabled button, you can add a dummy element in front of a disabled button and add a listener, associated with the disabled state, on that element. For example,

http://jsfiddle.net/FN45M/

js

$(document).ready(function () { /*this click listener could also be added as part of the disableButton function.*/ $(document).on('click', '.click-div', function () { console.log('clicked'); alert('clicked'); }); disableButton($('button')); //enableButton($('button')); }); function disableButton($el){ var wrapper = $el.wrap("<div class='wrapper'>").parent(); wrapper.css({"display":"inline","position":"relative"}); var divClick = $("<div class='click-div'>"); divClick.css({"position":"absolute", "top":0, "height":"100%", "width":"100%" }); wrapper.append(divClick); /*divClick.on('click', function () { console.log('clicked'); alert('clicked'); });*/ } function enableButton($el){ $el.next(".click-div").remove(); $el.unwrap("<div class='wrapper'>"); $el.prop("disabled",false); }

html

<button disabled>test</button>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Use following code

JQuery:

$("button#disabled, button#enabled").click(function(){ if($(this).attr('id') === 'disabled'){ alert('disabled'); // do your suff here for disabled button } else { alert('enabled'); // do your suff here for enabled button } });

HTML: 

<button id="disabled" style="color: graytext;"><i>disabled</button> <button id="enabled">enabled</button>

Example here

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.