JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<select name="foo" id="foo" >
<option value="5" selected="selected">5</option>
<option value="15">15</option>
<option value="25">25</option>
</select>
<input type="text" name="moo" id="moo" />
<input type="checkbox" name="boo" id="boo" />
<input type="radio" name="doo" value="false" />
<input type="radio" name="doo" value="true" />
<br/>
Type test in the textbox and check the checkbox to enable the select.
<br/>
By <a href="http://www.balupton.com" target="_blank">Benjamin "balupton" Lupton</a>, for <a href="http://stackoverflow.com/q/3731586/130638" target="_blank">a StackOverflow Question</a>
</div>
CSS
:disabled {
opacity:0.5;
}
.disabled {
opacity:0.5;
}
JavaScript
(function($){
/**
* jQuery.fn.dependsOn
* @version 1.0.1
* @date September 22, 2010
* @since 1.0.0, September 19, 2010
* @package jquery-sparkle {@link http://www.balupton/projects/jquery-sparkle}
* @author Benjamin "balupton" Lupton {@link http://www.balupton.com}
* @copyright (c) 2010 Benjamin Arthur Lupton {@link http://www.balupton.com}
* @license Attribution-ShareAlike 2.5 Generic {@link http://creativecommons.org/licenses/by-sa/2.5/
*/
$.fn.dependsOn = function(source,value){
var $target = $(this),
$source = $(source),
source = $source.attr('name')||$source.attr('id');
// Add Data
var dependsOnStatus = $target.data('dependsOnStatus')||{};
dependsOnStatus[source] = false;
$target.data('dependsOnStatus',dependsOnStatus);
// Add Event
$source.change(function(){
var pass = false;
var $source = $(this); // so $source won't be a group for radios
// Determine
if ( (value === null) || (typeof value === 'undefined') ) {
// We don't have a value
if ( $source.is(':checkbox,:radio') ) {
pass = $source.is(':selected:enabled,:checked:enabled');
}
else {
pass = Boolean($source.val());
}
}
else {
// We do have a value
if ( $source.is(':checkbox,:radio') ) {
pass = $source.is(':selected:enabled,:checked:enabled') && ($source.val() == value);
}
else {
pass = $source.val() == value;
}
}
// Update
var dependsOnStatus = $target.data('dependsOnStatus')||{};
dependsOnStatus[source] = pass;
$target.data('dependsOnStatus',dependsOnStatus);
// Determine
var...