Overview
This article introduces how to disable several Text fields depending on the choice selected in the Radio button field.
Sample Image
Prepare the App
Create an App
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
.
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.