I am disabling a button until atleast one checkbox has been selected like so:

var checkboxes = $("input[type='checkbox']"),
    submitButt = $("input[type='button']");

checkboxes.click(function() {
    submitButt.attr("disabled", !checkboxes.is(":checked"));
});

My buttons initial state is disabled but I need it to be like faded out or opacity added to it, im not sure what the best approach would be either do it with adding a class or just adding CSS? im not really sure?

I am disabling a button until atleast one checkbox has been selected like so:

var checkboxes = $("input[type='checkbox']"),
    submitButt = $("input[type='button']");

checkboxes.click(function() {
    submitButt.attr("disabled", !checkboxes.is(":checked"));
});

My buttons initial state is disabled but I need it to be like faded out or opacity added to it, im not sure what the best approach would be either do it with adding a class or just adding CSS? im not really sure?

• javascript
• html
• css

Share Improve this question Follow asked Feb 4, 2017 at 10:57 danjbhdanjbh 6151010 silver badges2121 bronze badges 5

• It's not at all clear what you're asking. Are you trying to make the button look disabled when it isn't disabled, or...? – T.J. Crowder Commented Feb 4, 2017 at 10:59
• Side note: Although jQuery will fix it for you if you do what's above, the correct way to set the disabled property is either .prop("disabled", booleanFlagHere), or if you want to use attr then setting it to any string to set the flag or using removeAttr to remove it. (But prop is simpler.) – T.J. Crowder Commented Feb 4, 2017 at 11:00
• @T.J.Crowder no the button IS disabled UNTIL a checkbox has been checked/selected. So the button is to appear disabled and then appear enabled once the action has taken place. – danjbh Commented Feb 4, 2017 at 11:00
• 1 To style a disabled element, you can use the following CSS selectors elementTag:disabled {/* CSS */} or elementTag[disabled] {/* CSS */} but as T.J.Crowder noted: it's difficult to interpret your question as to what, specifically, you want to do. It may be worth having a read of "How to Ask" for additional pointers. – David Thomas Commented Feb 4, 2017 at 11:11
• Gotcha, thanks guys it makes sense, Thanks TJ for pointing out a better method, and thanks David for the CSS tip off – danjbh Commented Feb 4, 2017 at 11:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

If you mean you want to adjust the appearance of a disabled button, you do that with a CSS attribute presence selector (input[type=button][disabled]) or a CSS :disabled pseudo-class selector (input[type=button]:disabled):

input[type=button][disabled] {
  color: red;
  opacity: 0.5;
}
/* or: */
input[type=button]:disabled {
  color: red;
  opacity: 0.5;
}

The attribute selector works because a disabled button has a disabled attribute, and an enabled one does not. But in modern code, I'd probably use :disabled instead.

Example:

var btn = $("#toggle");
setInterval(function() {
  btn.prop("disabled", !btn.prop("disabled"));
}, 1000);

/* Here I've used each of the two possible options
   to provide half of the styling you wanted.
   You'd obviously just choose one of them and use
   it to handle both parts of the styling.
*/
input[type=button][disabled] {
    color: red;
}
input[type=button]:disabled {
    opacity: 0.5;
}

<input type="button" value="This is enabled">
<input type="button" disabled value="This is disabled">
<input id="toggle" type="button" value="This one goes back and forth">
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Here is one way you can add the styling:

<button class="btn-disabled" disabled> Test </button>

button:disabled.btn-disabled {
    opacity: 0.5;
}

$("button").addClass( "btn-disabled" );