Selecting input element inside md-checkbox will toggle the checkbox

Question

In a list of multiple checkboxes I have an "other" checkbox where the user can insert some text. This is defined as:

<md-checkbox class="md-checkbox-interactive" ng-model="$ctrl.someVar">
  <input type="text" placeholder="Placeholder" ng-model="$ctrl.someVarText">
</md-checkbox>

The class md-checkbox-interactive is used to allow pointer events on the input element:

md-checkbox.md-checkbox-interactive {
  .md-label {
    input {
      pointer-events: all;
    }
  }
}

This was taken from the following answer to a similar question regarding radio buttons: https://stackoverflow.com/a/33304119/2051151

But, whenever I select the input element, the checkbox is toggled. What am I missing here?

score 0 · Accepted Answer · answered Apr 14 '17 at 09:01

After a bit of searching I found that I need to add the following on the input element:

ng-click="$ctrl.onClickInput($event)"

where the function is defined as:

this.onClickInput = function (event)
{
  // Prevent the click event to propagate
  event.stopPropagation();

  // But toggle the checkbox if necessary
  if (!vm.someVar) vm.someVar = true;
}

This will prevent the unwanted toggle of the checkbox.

Selecting input element inside md-checkbox will toggle the checkbox

1 Answers1