Step 1 :online samples for DHTMLX Form.
Step 2 :Form. Disabled
Step 3:Replace JavaScript content with the following steps
Step 4 :Click on toggle
Step 5:Change preview width
Repeat 4-5
const form = new dhx.Form("form", {
padding: 40,
rows:[
{
"cols": [
{
"name": "aaa_k",
"rows": [
{
"cols": [
{
"type": "input",
"name": "aaa",
"label": "aaa",
"labelWidth": 130,
"labelPosition": "left",
"show": true,
"placeholder": "aaaa",
"disabled": true,
},
{
"type": "toggle",
"name": "aaa_toggle",
"label": "",
"labelWidth": "80",
"labelPosition": "left",
"icon": "dxi dxi-checkbox-marked",
"offIcon": "dxi dxi-checkbox-blank-outline",
"width": 60,
"event": {},
"id": "u1742889803805"
}
]
}
],
"width": "50.00%"
}
]
},
]
});
form.events.on("change",function(name, new_value){
if(name==='aaa_toggle'){
if(new_value){
form.getItem('aaa').enable()
form.getItem('aaa').setProperties({placeholder:""});
}else{
form.getItem('aaa').disable()
form.getItem('aaa').setProperties({placeholder:"aaaa"});
}
}
});