Disabled checkbox - not working

[Robert]

Hello,

I have a form in component. One of controls is checkbox. I'm setting initially its state to disabled, but it's not working, it's always enabled.

        <kendo-formfield [orientation]="'horizontal'">

          <kendo-label [for]="searchWithoutRouteCheckbox" text="wyszukaj bez trasy"></kendo-label>

          <input type="checkbox" #searchWithoutRouteCheckbox class="search-without-route-type"

            [formControlName]="formNames.searchWithoutRoute" [value]="formModel.searchWithoutRoute" kendoCheckBox

            [disabled]="areControlsDisabled" />

          <app-form-error [controlName]="formNames.searchWithoutRoute" [form]="form"></app-form-error>

        </kendo-formfield>

 

  /**

   * If form controls should be disabled

   * @type {boolean}

   * @public

   */

  public areControlsDisabled: boolean = true;

 

  /**

   * Fired when railway objects combobox value is changed

   * @param {RailwayObject} value railway object item

   * @public

   */

  public railwayObjectsValueChange(value: RailwayObject): void {

    if (value) {

      this.areControlsDisabled = false;

      this.isSearchButtonDisabled = false;

      this.isClearButtonDisabled = true;

      return;

    }

    this.areControlsDisabled = true;

    this.isSearchButtonDisabled = true;

    this.isClearButtonDisabled = true;

  }

 

 

[Martin Bechev]

Hi Robert,

Thank you for the provided details.

When using Reactive Forms, it is recommended to disable the components through the form.

This is valid for all Kendo components as well as HTML input elements:

  public formGroup = new FormGroup({
        checkbox: new FormControl({value: true, disabled: true},)
    });

I hope this sheds some light on the case.

Regards,
Martin
Progress Telerik

[Robert]

Thanks for response. Ok, initial disabled state working, but... I cannot enable it again from code :)

[Martin Bechev]

Hi Robert,

To enable or disable a form control dynamically, use the enable and disable methods:

    public formGroup = new FormGroup({
        checkbox: new FormControl({value: true, disabled: true})
    });

    public enableCheckbox(){
        this.formGroup.controls['checkbox'].enable();
    }