How to Change CSS When It's Ng-Disabled

How to change CSS when it's ng-disabled?

use ng-class

<input type="submit" value="@Translator.Translate("PAYOUT")" class="btn-block 
secondary-button save-changes padding-8" ng-disabled="PayoutEnabled==false" 
ng-click="PayOut()" ng-class="{'diabled-class': !PayoutEnabled}" />

this will add css class diabled-class to the input when PayoutEnabled is false (!PayoutEnabled is true).

Angular Js ng-disabled the color of the button stays the same whether it is enabled or disabled

You can decrease the opacity of the button. Assuming button has a class of disableButton

Also you can add this class 'disableButton' in ng-class specifying the condition you gave for ng-disabled

For the button: (as per your comment)

<button data-ng-hide="isDisabled" type="button" ng-class="{'disableButton': isDisabled}" ng-disabled="isDisabled">Submit</button>

<img src="images/image_name.jpg" data-ng-show="isDisabled">

CSS:
Also, if you do not want to use the image you can use below CSS to make it more better

.disableButton{
    opacity: 0.35; 
    background: #eee;
    color: #444;
}

Style disabled button with CSS

For the disabled buttons you can use the :disabled pseudo class. It works for all the elements that have a disabled API (typically form elements).

For browsers/devices supporting CSS2 only, you can use the [disabled] selector.

As with the image, don't put an image in the button. Use CSS background-image with background-position and background-repeat. That way, the image dragging will not occur.

Selection problem: here is a link to the specific question:

• How to disable text selection highlighting

Example for the disabled selector:

button {
  border: 1px solid #0066cc;
  background-color: #0099cc;
  color: #ffffff;
  padding: 5px 10px;
}

button:hover {
  border: 1px solid #0099cc;
  background-color: #00aacc;
  color: #ffffff;
  padding: 5px 10px;
}

button:disabled,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

div {
  padding: 5px 10px;
}

<div>
  <button> This is a working button </button>
</div>

<div>
  <button disabled> This is a disabled button </button>
</div>

Submit button - Change CSS of submit button once no longer disabled

This can be done only with CSS:

Customize the CSS attributes as you want in those two rules.

#sub{  /* enabled */
  background-color:white;
  color:orange;
}
#sub:disabled{  /* disabled */
  background-color:grey;
  color:black;
}

Change the background color when disabled is true

Just have scope variable for ng-disabled and use it with ng-class

<input type="file" ng-disabled="shouldDisable" ng-class="{'disabledCssClassName' : shouldDisable}" id="id1">

Then in controller manage disabled state of your controler by setting shouldDisable = true/false and define css class in your stylesheet

angular - access the element from ng-disabled

There is no direct way to pass element via ng-disabled. You can create one directive say "disabled-ele" and put your element disabling logic there.

Example Code:

.directive('disabledEle', function() {
                    return {
                        restrict: 'EA',
                        link: function(scope, element, attrs) {
                            if(attrs.disabledEle.toLowerCase() === 'true') {
                                element.attr('disabled', 'disabled');
                            } else {
                                element.removeAttr('disabled');
                            }
                        }
                    }
                });

<button type ="button" value="Click" class = "btn btn-default" disabled-ele="false">Click
                    </button>

disabling a div in angularjs using ng-disabled

You can't disable DIV. Disable work with button and input types only. You can try with css. Use ng-class.

<div ng-class="{ 'div-disabled': model.disableDate}"> // give condition here as per your scenario

.div-disabled
{
  pointer-events: none;
  opacity: 0.5;
  background: #CCC;
}

Apply CSS to disabled input button

You can add a new css class here:

submitButtShare.attr("disabled", !checkboxes.is(":checked")).toggleClass('disabled');

now in the css you can use this:

#buttonShareMap.disabled{
    background:#c5c5c5;
    color:#ddd;
}

checkout the sample demo:

$(':checkbox').change(function() {  $('#buttonShareMap').prop('disabled', this.checked).toggleClass('disabled');});

.red {  color: red;  background:#0ff;}#buttonShareMap.disabled {  background: #c5c5c5;  color: #ddd;  cursor: not-allowed;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input type='button' id='buttonShareMap' class='red' value='buttonShareMap' /><input type='checkbox' />

---

Related Topics