Disable Fields with Radio Buttons

Contents

Overview

This article introduces how to disable several Text fields depending on the choice selected in the Radio button field.

Sample Image

Animated GIF: User uses the radio button to disable several Text fields.

Prepare the App

Create an App (External link) with the following fields and settings.

Field Type Field Name Field Code
Radio button Choice radio_button_field
Text Field A FieldA
Text Field B FieldB
Text Field C FieldC

Sample Code

Prepare the following JavaScript code in a text editor and navigate to the Kintone App's settings. Upload the file into the Upload JavaScript for PC option of the JavaScript and CSS Customization settings (External link).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// Use the Radio button to disable fields

(function() {
  'use strict';

  var CHOICE = 'radio_button_field'; // field code of radio button
  var FIELD_A = 'FieldA'; // field code of the field to disable
  var FIELD_B = 'FieldB'; // field code of another field to disable
  var FIELD_C = 'FieldC'; // field code of one more field to disable

  var events = ['app.record.create.show', 'app.record.edit.show', 'app.record.create.change.' + CHOICE, 'app.record.edit.change.' + CHOICE];
  kintone.events.on(events, function(event) {
    var record = event.record;
    var toggleVal = record[CHOICE].value;

    if (toggleVal === 'A') {
      record[FIELD_A].disabled = false;
      record[FIELD_B].disabled = true;
      record[FIELD_C].disabled = true;
    } else if (toggleVal === 'B') {
      record[FIELD_A].disabled = true;
      record[FIELD_B].disabled = false;
      record[FIELD_C].disabled = true;
    } else {
      record[FIELD_A].disabled = true;
      record[FIELD_B].disabled = true;
      record[FIELD_C].disabled = false;
    }
    return event;
  });
}());

Navigate to the Record Create page or the Record Edit page. Clicking through the choices in the Radio button field should disable or enable the related Text fields.