znbailey/jQuery-Dependent-Fields

Show/hide a form field based on another form field

A jQuery plugin that will show or hide a "dependent" field based on some other "master" field.

Example Usage

You probably want to just look at the example, but if you prefer to read prose instead of code, here goes --

$('#dependent-field').dependsOn('#master-field');

If #master-field is a checkbox, the row containing '#dependent-field' will be shown/hidden based on whether the master field is checked/unchecked, respectively.

If #master-field is a select/dropdown, the row containing '#dependent-field' will be shown/hidden based on whether the selected option has a non-empty value.

You may additionally specify a conditional value or values:

$('#dependent-field').dependsOn('#master-field', 'value');

$('#dependent-field').dependsOn('#master-field', ['value', 'value2']);

This only makes sense when used with a select element - if the value of the selected option is any of the specified values, the dependent field will be shown.

Note: Like you'd expect, you may use any jQuery selector for the first call. The plugin is also written to support idiomatic jQuery chain-ability so you can do things like:

$('input.depends-on-xyz').dependsOn('#xyz').somethingElse().anotherThing()

If you have a input text in a container div, you can specify the 'depends-container' class in the master container DIV:

<div class="depends-container">
{{ form_row(form.my_input) }}
</div>

Also you can give a callback after the toggle:

var fieldRequired = function(){
	var target = $('#target').find('input[type="text"]');

	if(target.is(':visible')){   
    	
    	//add require
    	target.attr(required,required);

	}else{

    	//remove require
    	target.removeAttr(required);
    	
    }
}

$('.ui.depends.target').dependsOn('.ui.depends.master',null,fieldRequired);

Known Limitations/Shortcomings

• Only works with checkboxes and select elements.
• The plugin depends on your form field being wrapped in a row using a paragraph tag as it looks for the closest wrapping paragraph tag to show/hide. If you use a div or some other element type to wrap your form rows, you will need to modify the .closest('p') calls to use .closest('div') or whatnot.