To change the properties of an editor, get its instance first using the getEditor(dataField) method. After that, call the option(optionName, optionValue) or option(optionName, options) method of this instance. This approach is more typical of jQuery.

JavaScript

$(function() {
    var form = $("#formContainer").dxForm({
        formData: {
            firstName: "John",
            lastName: "Heart",
            phone: "+1(213) 555-9392",
            email: "jheart@dx-email.com"
        }
    }).dxForm("instance");

    $("#checkBoxContainer").dxCheckBox({
        text: 'Disable the First Name Editor',
        value: false,
        onValueChanged: function (e) {
            form.getEditor("firstName")
                .option("disabled", e.value);
        }
    });
});

NOTE

The getEditor(dataField) method is available for visible form items only.

With Angular, Vue, or React, bind the property that should be changed in the editorOptions object to a component property.

Angular

HTML

TypeScript

<dx-form
    [(formData)]="employee">
    <dxi-item dataField="firstName" [editorOptions]="{ disabled: disableFirstName.value }"></dxi-item>
    <dxi-item dataField="lastName"></dxi-item>
    <dxi-item dataField="phone"></dxi-item>
    <dxi-item dataField="email"></dxi-item>
</dx-form>
<dx-check-box #disableFirstName
    text="Disable the First Name Editor"
    [value]="false">
</dx-check-box>

import { DxFormModule, DxCheckBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        firstName: "John",
        lastName: "Heart",
        phone: "+1(213) 555-9392",
        email: "jheart@dx-email.com"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule,
        DxCheckBoxModule
    ],
    // ...
})

Vue

App.vue

<template>
    <div>
        <DxForm :form-data="employee">
            <DxSimpleItem data-field="firstName" :editor-options="editorOptions" />
            <DxSimpleItem data-field="lastName" />
            <DxSimpleItem data-field="phone" />
            <DxSimpleItem data-field="email" />
        </DxForm>
        <DxCheckBox
            text="Disable the First Name Editor"
            :value="editorOptions.disabled"
            @value-changed="checkBoxValueChanged" />
    </div>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import { DxForm, DxSimpleItem } from 'devextreme-vue/form';
import { DxCheckBox } from 'devextreme-vue/check-box';

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    phone: '+1(213) 555-9392',
    email: 'jheart@dx-email.com'
};

export default {
    components: {
        DxForm, DxSimpleItem, DxCheckBox
    },
    data() {
        return {
            employee,
            editorOptions: {
                disabled: false
            }
        };
    },
    methods: {
        checkBoxValueChanged(e) {
            this.editorOptions = { disabled: e.value };
        }
    }
};
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { Form, SimpleItem } from 'devextreme-react/form';
import { CheckBox } from 'devextreme-react/check-box';

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    phone: '+1(213) 555-9392',
    email: 'jheart@dx-email.com'
};

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            editorOptions: {
                disabled: false
            }
        };
        this.onCheckBoxValueChanged = this.onCheckBoxValueChanged.bind(this);
    };

    render() {
        return (
            <div>
                <Form formData={employee}>
                    <SimpleItem dataField="firstName" editorOptions={this.state.editorOptions} />
                    <SimpleItem dataField="lastName" />
                    <SimpleItem dataField="phone" />
                    <SimpleItem dataField="email" />
                </Form>
                <CheckBox
                    text="Show the Phone Number"
                    value={this.state.editorOptions.disabled}
                    onValueChanged={this.onCheckBoxValueChanged} />
            </div>
        );
    }

    onCheckBoxValueChanged(e) {
        this.setState({
            editorOptions: {
                disabled: e.value 
            }
        });
    }
}

export default App;

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

jQuery Form - Editor Properties

Angular

Vue

React

See Also