Editor Options

To change the options 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 option 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.common.css';
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.common.css';
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;
See Also