Is there a way to disable a button using jQuery without making it transparent?

Question

I am using jQuery in a project so I figured I leverage some of its specific methods. Anyway I have two buttons and upon a certain condition I'd like to disable it. Like so:

if (...condition...) {
   $('button#submit, #hint').prop("disabled", true);
}

However it makes the buttons transparent—

Before:

After:

Rather than going through the trouble of creating a specific class does anyone know if jQuery have an alternative—which maybe makes it grey and rather than transparent?

Thanks in advance!

i mean.. you can apply styles with jquery, but styling the disabled button would likely make more sense. jQuery shouldn't be styling your page. — Kevin B, Jul 18 '17 at 17:46
_Rather than going through the trouble of creating a specific class_, this is the best solution though. Why it does not fit your needs ? — Ulysse BN, Jul 18 '17 at 17:56
Possible duplicate? https://stackoverflow.com/questions/14750078/style-disabled-button-with-css — Kevin B, Jul 18 '17 at 18:07
In browser dev tools elements inspector - Inspect the css rules that apply when it is disabled and modify the css rules affecting it — charlietfl, Jul 18 '17 at 18:17

score 2 · Answer 1 · edited Jul 18 '17 at 18:01

2

You can try styling the disabled CSS selector.

$('button').on('click',function(e){
  $(this).prop('disabled', true);
});

:disabled{
  background:red;
  color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
Button
</button>

edited Jul 18 '17 at 18:01

War10ck

12,387
7
41
54

answered Jul 18 '17 at 17:53

JJJ

3,314
4
29
43

Not sure why this answer got a down vote, either. It gives the functionality the OP asked for. – freginold Jul 18 '17 at 17:57
2

.attr is the wrong method to change the disabled property. – Kevin B Jul 18 '17 at 17:58
1

@KevinB It may not be best practice, but it works here. – freginold Jul 18 '17 at 18:00
@War10ck thanks for that. I obviously don't use jQuery that much :P – JJJ Jul 18 '17 at 18:00
2

@freginold it would only work once, until you wanted to make it not disabled. – Kevin B Jul 18 '17 at 18:01
1

@JosanIracheta No worries. It's easy to confuse the two. – War10ck Jul 18 '17 at 18:01
1

@War10ck btw `disabled,true` and `disabled,disabled` both work ;-) – JJJ Jul 18 '17 at 18:03
2

[this discussion has been had already](https://stackoverflow.com/questions/5874652/prop-vs-attr) – Kevin B Jul 18 '17 at 18:04

score 1 · Answer 2 · answered Jul 18 '17 at 18:09

1

You can use jQuery to style the button per your liking.

$('button').on('click',function(e){
   $(this).prop('disabled', true);
   $(this).css('background-color','#CCCCCC');
 });

answered Jul 18 '17 at 18:09

Goldbug

605
6
8

score 0 · Answer 3 · answered Jul 18 '17 at 17:50

0

Well, yes. Don't disable the button at all, style the button yourself and "kill" the button's ability to perform any actions.

var btn = document.querySelector("button");

btn.addEventListener("click", btnClick);

function btnClick(){
  console.log("Business as usual.");
}

var chk = document.querySelector("input[type='checkbox']");

chk.addEventListener("change", function(){
  if(this.checked){
    // Kill the click event and alter the style
    btn.classList.add("disabled");
  } else {
    // Restore the look
    btn.classList.remove("disabled");    
  }
});

.disabled {
  pointer-events:none;
  color:#808080;
  
}

<button>Click Me</button>
<input type="checkbox" value="disable">Disable button

answered Jul 18 '17 at 17:50

Scott Marcus

64,069
6
49
71

i don't like it. – Kevin B Jul 18 '17 at 17:55
So? It solves the problem with simple standard code. What's not to like? Maybe I'll start "not liking" your valid answers? – Scott Marcus Jul 18 '17 at 17:56
Not sure why this answer got a downvote... it does exactly what the OP asked for, with a clear explanation. – freginold Jul 18 '17 at 17:56
an answer working, and an answer being good/useful, are two different things. – Kevin B Jul 18 '17 at 17:57
@War10ck The `disabled` pseudo-class is not at all for this scenario because the OP doesn't like what making the element disabled does. Therefore, a work-around is needed. – Scott Marcus Jul 18 '17 at 17:57
@ScottMarcus It most certainly is for this scenario. The OP doesn't like the way it looks: _"However it makes the buttons transparent...which maybe makes it grey and rather than transparent?"_ Change the style not the functionality... – War10ck Jul 18 '17 at 17:58
@KevinB Did you wake up and decide to be a troll today? This is a very good and simple answer. The OP is telling us that `disabled` isn't going to work for them. This is the only other way to accomplish the desired result. – Scott Marcus Jul 18 '17 at 17:58
clearly it isn't the only way to accomplish it, there's a far simpler method posted in the other answer. – Kevin B Jul 18 '17 at 17:58

Is there a way to disable a button using jQuery without making it transparent?

3 Answers3