Support

Account

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

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