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.
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;
}
@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?
@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.