Support

Account

Home Forums Feature Requests Ability to disable a True / False field

Helping

Ability to disable a True / False field

  • 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;
    }
    
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.