Display hidden fields as disabled

Maybe you want to display fields that would otherwise be hidden (because they’re conditional on another field’s value). This code snippet keeps all fields visible, but disables and greys out fields that are unavailable:

	<?php
	/**
	* Display hidden fields as disabled
	*/
	function prefix_disable_hidden_fields() { ?>

	<script>
	jQuery( document ).ready( function( $ ) {
	function disableHiddenFields(){
	$( 'form.cart' ).find( '.pewc-hidden-field' ).each( function() {
	// Display and disable hidden fields
	$( this ).show().css( { visibility: 'visible', opacity: 0.5 } ).find( '.pewc-form-field' ).prop( 'disabled', true );
	});
	}
	$( '.pewc-form-field, .pewc-radio-form-field' ).on( 'change update', function() {
	$( 'form.cart' ).find( '.pewc-item' ).each( function() {
	// Reset fields
	$( this ).css( { opacity: 1 } ).find( '.pewc-form-field' ).prop( 'disabled', false );
	});
	// Set a delay to let the plugin do its stuff first
	setTimeout( disableHiddenFields, 150 );
	});
	disableHiddenFields();
	});
	</script>

	<?php }
	add_action( 'pewc_after_product_fields', 'prefix_disable_hidden_fields' );

view raw prefix_disable_hidden_fields.php hosted with ❤ by GitHub

Here’s how to add a snippet.

Was this article helpful?

Related Articles