title: Disable and visually forbid button that opens modal dialog
body: <p>I am using Bootstrap in conjunction with AngularJS. In my application, a link is used to open a modal dialog (using the <a href="https://v4-alpha.getbootstrap.com/components/modal/#via-data-attributes" rel="nofollow noreferrer">data attributes</a> concept). I would like to disable the button depending on a state variable or function.</p>
  
  <p>The problem is, AngularJS still executes the function <code>doSomething()</code> defined in <code>ng-click</code>, even if the button is <code>ng-disabled</code>. I can overcome this issue by implementing a guard, that basically checks the same variable as used in the <code>ng-disabled</code> attribute. This prevents the code in <code>ng-click</code> from being executed (well, technically it is executed, but my function will not trigger).</p>
  
  <p>However, the modal dialog will still open, because the <code>data-*</code> attributes do not respect the value of <code>ng-disabled</code>. Instead, they rely on the CSS class <code>disabled</code>. I can also set that CSS class using <code>ng-class</code>. Are you still with me? :-)</p>
  
  <p><strong>Currently, my code looks like this:</strong></p>
  
  <pre><code>&lt;a href="#showModalDialog" class="btn btn-success btn-md" ng-class="{ 'disabled': !isSomeState() }" data-toggle="modal"
    ng-click="!isSomeState() || doSomething()" ng-disabled="!isSomeState()"&gt;
    &lt;span class="fa fa-foobar"&gt;&lt;/span&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Bootstrap's CSS class <code>disabled</code> will set <code>pointer-events: none;</code> which is fine for the clicking. The modal dialog will no longer open, when the button is disabled. But Bootstrap used to change the mouse pointer to a <em>forbidden</em> sign on disabled user controls. When <code>pointer-events: none;</code> is set, however, the mouse pointer will no longer change. This breaks the consistency of my user interface.</p>
  
  <p>Is there any solution for that? I would like to have</p>
  
  <ul>
  <li>the button visually disabled,</li>
  <li>it should have a <em>forbidden</em> sign as a pointer on mouse-over,</li>
  <li>the <code>ng-click</code> should not execute my function when the button is disabled</li>
  <li>and furthermore the modal dialog should not open.</li>
  </ul>
  
  <p>And since it's Christmas today, I'm looking for a <strong>simple solution</strong>, i.e. I do not want to rewrite major parts of neither Bootstrap nor AngularJS. I have a lot of these modal dialogs</p>