Search code examples
javascriptangularjsmaterialize

ng-click not working when adding 'disabled' class in materializecss

I'm using AngularJS and MaterializeCSS framework in my project and for buttons it has a 'disabled' class to show them greyed out.

In angular adding or removing a class does not affect the functionality of ng-click. We have to manually add logic in callback of ng-click to prevent any disabled buttons from working.

But this is a new scenario I'm facing where just adding a 'disabled' class to the button stops the working of ng-click.

I'm adding the 'disabled' class via ng-class

<button class="btn waves-effect waves-light" ng-class="{'disabled' : vm.disabled}" 
ng-click="vm.counter=vm.counter+1">Counter++</button>
<span>Times Clicked: {{vm.counter}}</span>
<input type="checkbox" id="test5" ng-model="vm.disabled" />

Here is plunker for demo. https://plnkr.co/edit/ZP7CIkEW1lLFjHx3xTGV?p=preview

Guys, I'm not looking for a solution or some fix about how to make it work. I'm looking for an explanation. Why is it happening? Thanks :)

Solution

  • Because materializecss has .btn.disabled {pointer-events: none;}

    To make it work, add:

    .btn.disabled {
    pointer-events: auto;
}