Angular2 : How to forbid one of the radio elements?

Question

I'm trying to have a form with a list of select on radio and one of the radio is disabled.

Code:

  <fieldset class="form-group d-flex justify-content-center">
<legend class="col-form-legend sr-only">Type data</legend>
<div>
  <div class="form-check">
    <label class="form-check-label">
      <input class='form-check-input' type='radio' name='type-data' id='type-data1' value='one' disabled="false" />
      Data 1
    </label>
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input class='form-check-input' type='radio' name='type-data' id='type-data2' value='one' disabled="true" />
      Data 2
    </label>
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input class='form-check-input' type='radio' name='type-data' id='type-data3' value='one' disabled="false" />
      Data 3
    </label>
  </div>
</div>

But, I have all elements disabled.

Why?

Answer 1

As soon as you include the disabled attribute, no matter what you set it to, it will disable the control.

Delete all your disabled="false"

In the future if you want to disable an attribute, just add disabled.

<input type="text" disabled/>

If you wish to data-bind the disabled state to an Angular component:

<input type="text" [disabled]="booleanComponentVar"/>

Angular will remove disabled attribute for you when booleanComponentVar is false.