Label text of button is still clickable when button is disabled

Question

I have a button that I have disabled via a data-bind. At runtime the button is grayed out. When a user floats their cursor over the non-text area of the button, then the button acts as a disabled button - the user cannot click on it. However, if the user floats their cursor over the text label in button, then they can click on it. Why?

<div class="flextable-item">
            <div class="btn-toolbar dashhead-toolbar float-left">
                <a href="@Url.Action("Edit", "VendorManagement", new { area = "Vendor" })/@Model.Id">
                    <button type="button" class="btn btn-primary-outline" data-bind="enable: EnableDetail">
                        <span class="icon icon-pencil" > Edit</span>
                    </button>
                </a>
            </div>
        </div>

Answer 1

When the button is clicked directly, the disabled attribute prevents a click event from being triggered.

When you click any of the button's child elements, the event will bubble up to the parents. The button won't fire its own click handlers, but it will pass on the event to its own parent.

You can prevent the <a> element's default behavior by attaching a click handler that returns false:

_{Note: the snippet below won't actually allow the <a> to open a new tab, but you can check the browser console to see its default behavior trying to execute when enabled() === true.}

ko.applyBindings({
  enabled: ko.observable(false),
  checkEnabled: vm => {
    const isEnabled = vm.enabled();
    console.log(isEnabled
      ? "Allow click"
      : "Prevent click"
    );
    return isEnabled;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>


<a data-bind="click: checkEnabled"
   href="https://stackoverflow.com" 
   target="_blank">
  <button data-bind="enable: enabled">
    <span>Go</span>
  </button>
</a>
<br>
<label>
  <input type="checkbox" data-bind="checked: enabled">
  Enable button
</label>