JSFiddle - React, Tailwind, and code Playground

by Benjamin Lupton

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="checkbox" name="boo" id="boo" />
    <input type="text" name="moo" id="moo" />
</div>

CSS

:disabled {
    opacity:0.5;
}
.disabled {
    opacity:0.5;
}

JavaScript

(function($){
    $.fn.dependsOn = function(source,value){
        var $target = $(this),
            $source = $(source),
            source = $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;
        
            // Determine
            if ( (value === null) || (typeof value === 'undefined') ) {
                // We don't have a value
                if ( $source.is(':checkbox,:radio') ) {
                    pass = $source.is(':checked:enabled');
                }
                else {
                    pass = Boolean($source.val());
                }
            }
            else {
                // We do have a value
                if ( $source.is(':checkbox,:radio') ) {
                    pass = $source.is(':checked:enabled') && ($source.val() == value);
                }
                else {
                    pass = $source.val() == value;
                }
            }
        
            // Update
            var dependsOnStatus = $target.data('dependsOnStatus')||{};
            dependsOnStatus[source] = true;
            $target.data('dependsOnStatus',dependsOnStatus);
        
            // Determine
            var passAll = true;
            $.each(dependsOnStatus, function(i,v){
                if ( !v ) {
                    passAll = false;
                    return false; // break
                }
            });
        
            // Adjust
            if ( passAll ) {
                $target.attr('disabled','disabled').addClass('disabled');
            }
            else {
                $target.removeAttr('disabled').addClass('disabled');
            }
        }).trigger('change');
    };

    $(function(){
        $('#foo').dependsOn('#boo').dependsOn('#moo','test');
   ...