Reply To: Ability to disable a True / False field

• 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;
}