Ability to disable a True / False field

• Johan Hermansson

• September 13, 2022 at 7:00 am

I register fields with code, and for the current project I would like to disable a True / False checkbox, but I found out that it’s not possible with the disabled argument.

I guess I will solve it with JS and a save field hook, but it would be neat for it to just work 🙂

I tried adding this to the acf_field_true_false::render_field, which worked for both the UI and non-UI checkbox.

if ( ! empty( $field['disabled'] ) ) {
    $input['disabled'] = 'disabled';
}

But the non-UI toggle element should probably be greyed out for better visibility.

• Johan Hermansson

• September 14, 2022 at 4:19 am

This JavaScript and CSS as a workaround works pretty good for my project if anyone needs this.

JavaScript:

acf.addAction("ready", function() {
	const disabledTrueFalse = acf.getField("enter_field_key_here");

	if (!disabledTrueFalse.$el.length) {
		return;
	}

	disabledTrueFalse.$input().prop("disabled", true);
});

Messy CSS 😀

.acf-field-true-false input[type="checkbox"][disabled] {
  cursor: default;
}

.acf-field-true-false input[type="checkbox"][disabled].acf-switch-input {
  opacity: 0;
}

.acf-field-true-false input[type="checkbox"][disabled] + .acf-switch,
.acf-field-true-false input[type="checkbox"][disabled] + .acf-switch:hover {
  cursor: default;
  color: #fff;
  background-color: #aaa;
  border-width: 0;
}

.acf-field-true-false input[type="checkbox"][disabled] + .acf-switch .acf-switch-slider {
  background-color: #eee;
  border-color: #aaa;
}

.acf-field-true-false input[type="checkbox"][disabled] + .acf-switch .acf-switch-on {
  text-shadow: none;
}

• xxaimsxx

• March 20, 2023 at 4:54 pm

@johanhermansson So this would just disable it from the “editor’s” view but I’d be able to change it programmatically using “update_field” if condition is met?

• Johan Hermansson

• March 20, 2023 at 7:23 pm

@xxaimsxx Yes of course. I just wanted it to be disabled front-end to feel more consistent, but I have not looked at this for awhile. Maybe it has changed.