jQuery – bind checkbox and text input such that input allowed only if box is checked

Using jQuery to bind together a checkbox and input text field. The text input is only editable if the check box is selected. Otherwise, reset the textbox value and make it readonly.

$(document).ready(function(){
	var $objFSM = $( "#id_file_size_max" ); // Checkbox
	var $objMAFS = $( "#id_max_allowed_file_size" ); // Input TEXT
	// Check checked property of FSM and set readonly property of MAFS accordingly on form load
	if($objFSM.attr('checked')) { // Make MAFS editable
		$objMAFS.attr('readonly', false);
	}
	else { // Make MAFS readonly
		$objMAFS.attr('readonly', true);
	}
	
	$objFSM.click(function() {
		if($objFSM.attr('checked')) { // Make MAFS editable
			$objMAFS.attr('readonly', false);
		}
		else { // Make MAFS readonly
			$objMAFS.val('');
			$objMAFS.attr('readonly', true);
		}
		
	});
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s