Can't validate value of disabled field in AEM

Hi,

I am created some fields in AEM as textfield with required Boolean = true . So I am using javaScript to disable that field when the user checked to a checkbox fields.

Example: propertyName and city are mandatory fields. required Boolean = true

$("coral-select[name='./ppdPropertySelect']").prop("disabled", true);

$("#syndft").change(function(){

var checked=this.checked;

if(checked==true) // "this" refers to the element that fired the event

    {

          $("coral-select[name='./ppdPropertySelect']").prop("disabled", false);

          //disable sync field

        $("input[name='./propertyName']").prop("disabled", true);

          $("coral-select[name='./city']").prop("disabled", true);

    }else{

          $("coral-select[name='./ppdPropertySelect']").prop("disabled", true);

          //disable sync field

         $("input[name='./propertyName']").prop("disabled", false);

          $("coral-select[name='./city']").prop("disabled", false);

    }

});

I have a javascript to auto fill data in to propertyName and city. The field have a data but it doesn't pass the validation as attached image.

The AEM have the errors when I using disabled fields as below.

When I remove the code disabled field, it work fine.

Why AEM have error and wrong validation with disabled fields?

How to fix it?

Thank you so much,

BienHV