Checkbox disabled="false" not working

[Jonas Czeslik]

Hello Syncfusion team, 

I am dynamically generating form elements including syncfusion checkboxes on the basis of a json. So my generic checkbox looks like that: 

    <ejs-checkbox *ngIf="dialogItem['type']==='checkbox'" label='{{dialogItem["label"] + suffix}}' 

     checked='dialogItem["checked"]' disabled="{{dialogItem['access']==='readOnly'}}"

     (change)="delegateSettingChange($event, dialogItem['id'], dialogItem['type'])">ejs-checkbox>

So, if we especially have a look at the disabled property, I want to set that property according to a string in the json thats either "readOnly" or "readWrite". At the moment these two states are enough. 
The problem is that the disabled property seems to be true no matter what statement I put in there. I also tried to just write disabled="false" and it still generates a disabled checkbox as long as the disabled property is written out in the tag. Is that intentional or is it bug? For the dynamic reasons, it would be cool to have that possibility to react to both access types in the HTML. 

Thanks in regard,

Jonas Czeslik

[Aravinthan Seetharaman]

Hi Jonas, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your query in our Angualr Syncfusion Button Controls latest version 19.1.0.63. We cannot reproduce your reported issue in our end. For your reference we have prepared code snippet and sample here. 

 

app.component.html 

 

<div class="control-section"> 

  <div class="checkbox-control"> 

    <ejs-checkbox *ngIf="data[0].type==='CheckBox'" [label]="data[0].label" [checked]="data[0].checked" 

      [disabled]="data[0].access==='readOnly'"> 

    </ejs-checkbox> 

    <div class="row"> 

      <ejs-checkbox *ngIf="data[1].type==='CheckBox'" [label]="data[1].label" [checked]="data[1]['checked']" 

        [disabled]="data[1].access==='readOnly'"> 

      </ejs-checkbox> 

    </div> 

  </div> 

</div> 

 

 

app.component.ts 

 

export class AppComponent { 

  constructor() {} 

  public data = [ 

    { 

      type: 'CheckBox', 

      access: 'readOnly', 

      checked: true, 

      label: 'ReadOnly CheckBox' 

    }, 

    { 

      type: 'CheckBox', 

      access: 'ReadWrite', 

      checked: true, 

      label: 'ReadWrite CheckBox' 

    } 

  ]; 

} 

 

 

Sample: https://stackblitz.com/edit/angular-bkf6r6?file=app.component.ts  

 

If you are still facing the issue, kindly share the below details. 

 

·        If possible, try to reproduce the reported issue in provided sample or share the issue reproducible sample. 

·        Please share us the video demonstration of this issue. 

·        Please share us the Syncfusion Package version. 

 

Please provide the above requested information, based on that we will check and provide you a better solution quickly. 

 

Regards, 

Aravinthan S 

[Jonas Czeslik]

Ah okay, I solved the mystery ... 

I forgot the [] brackets around disabled and thats why it didnt get detected as the syncfusion attribute "disabled" but as the standard HTML attribute disabled that works as a flag and disables the according element no matter, what I type after it.

I didnt think about that because in a certain way, the disabled worked or at least had a disabling effect, so I thought the mistake would have to be on the syncfusion end. 

Sorry about that and thanks for the clearing example!

Best regards 

Jonas Czeslik

[Aravinthan Seetharaman]

Hi Jonas, 

 

Thanks for the update. 

 

We are happy to hear that your issue has been resolved. Please feel free to contact us if you need any further assistance on this. 

 

Regards, 

Aravinthan S