dstreet / dependson Goto Github PK

View Code? Open in Web Editor NEW

105.0 12.0 33.0 149 KB

a jQuery plugin for handling form field dependencies

Home Page: http://dstreet.github.com/dependsOn

License: MIT License

JavaScript 100.00%

jquery

dependson's Introduction

dependsOn

A jQuery plugin to facilitate the handling of form field dependencies.

$( subject ).dependsOn( dependencySet, [options] );

Examples

Demo

Installation

with npm

npm install --save jquery-depends-on

with Bower

bower install --save jquery-depends-on

Download directly

Latest Release

Build from source

git clone https://github.com/dstreet/dependsOn.git
cd dependsOn
npm install
gulp

# --> dist/dependsOn.min.js

Usage

Include jQuery (requires v1.7 or higher)

<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>

Include dependsOn

<script type="text/javascript" src="dependsOn.min.js"></script>

Add form components

<form id="myForm">
	<label for="myCheck">Check Me</label>
	<input type="checkbox" id="myCheck">

	<label for="myText">Input</label>
	<input type="text" id="myText" value="">
</form>

Activate plugin

$('#myText').dependsOn({
	// The selector for the depenency
	'#myCheck': {
		// The dependency qualifiers
		enabled: true,
		checked: true
	}
});

Qualifiers

enabled: (Boolean) If true, then dependency must not have the "disabled" attribute.
checked: (Boolean) If true, then dependency must not have the "checked" attribute. Used for checkboxes only.
values: (Array) Dependency value must equal one of the provided values.
not: (Array) Dependency value must not equal any of the provided values.
match: (RegEx) Dependency value must match the regular expression.
notMatch: (RegEx) Dependency value must not match the regular expression.
contains: (Array) One of the provided values must be contained in an array of dependency values. Used for select fields with the "multiple" attribute.
email: (Boolean) If true, dependency value must match an email address.
url: (Boolean) If true, Dependency value must match an URL.
range: (Array) Dependency value must be within the given range.
Custom: (Function) Custom function which return true or false.

Options

disable: (Boolean) Add "disabled" attribute to the subject's form field. Default: true
readonly: (Boolean) Add "readonly" attribute to the subject's form field. Default: false
hide: (Boolean) Hide the subject on disable and reveal the subject on enable. Default: true
duration: (Number) The time in milliseconds for the fade transition. Used only if hide is set to true. Default: 200
trigger: (String) The event used to check dependencies. Default: 'change'
onEnable: (Function) The callback function to execute when the subject has been enabled. Default: Empty Function
onDisable: (Function) The callback function to execute when the subject has been disabled. Default: Empty Function
valueOnEnable: (String) The value to set the subject to when enabled.
valueOnDisable: (String) The value to set the subject to when disabled.
checkOnEnable: (Boolean) If true, "checked" attribute will be added to subject when enabled. If false, "checked" attribute will be removed from subject when enabled. For checkboxes and radio buttons.
checkOnDisable: (Boolean) If true, "checked" attribute will be added to subject when disabled. If false, "checked" attribute will be removed from subject when disabled. For checkboxes and radio buttons.
valueTarget: (String) jQuery selector for the object to you want to target for editing the value. Use if you want to alter the value of something other than the subject.
toggleClass: (String) The class you wish to be appended to the subject when enabled. The class will be removed when the subject is disabled.

Callbacks

When the onEnable and onDisable callbacks are called, this is set to the last triggered dependency, and the function is passed two arguments:

e: The triggering event object
$subject: The jQuery object of the subject

Other Libraries

rails_depends_on - Rails Gem for dependsOn

dependson's People

Contributors

Stargazers

Watchers

dependson's Issues

onEnable / onDisable don't work on document ready.

Hello.
If I set onEnable / onDisable options it doesn't work on initial page load, only after manual changes in dependency (check radio / checkbox).
What I want is they trigger depends on dependency initial state right after I call dependsOn on element.
State of the dependent element calculates fine but these callbacks don't fire.

Thanks for plugin.

add a license to repo

update .min.js to reflect merge changes

enhancement suggestion

great plugin and i see from the road map will be even better

i have no javascript background so i'm sorry if this is a stupid idea

would be great if a developer could somehow integrate this with a cms, etc without the need to write any specific javascript

i will try to make some sense

most applications have some kind of form generator / builder (visual or not) and use ajax to do some/all tasks related to forms

so the plugin could watch for the creation of any form elements based on a class/selector
and autobuild itself based on rules defined using data attributes

something like

$('.dependson').dependsOn({default options:here});

<input id="a" name="a"></input>
<input class="dependson" data-depends-on-parents ="json here" data-depends-on-qualifiers="json here" data-depends-on-options="json here" id="b" name="b"></input>

now sure how hard or feasible would be to add this (i have no javascript experience so don't know limitations and problems)

best regards

Add option setting the field attribute when the subject is disabled

Should be able to support both disabled and readonly attributes. Possibly add custom functionality here.

refs #4

Add notMatch qualifier

refs #6

Intersecting checkboxes

Hello.
Thanks for great plugin, I have one problem.
I was looking for solution to problem when change event doesn't work for programmatic change and I think I found it here #18.

Version: 1.3.0.

But when I update lib this code stops working:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script src="./jquery-3.1.1.min.js"></script>
    <script src="./dependsOn.min.js"></script>

    <script>
        $(function () {
            $("#first").dependsOn({
                "#second": {
                    checked: true,
                }
            }, {
                hide: false,
                disable: false,
                checkOnEnable: false,
            });

            $("#second").dependsOn({
                "#first": {
                    checked: true,
                }
            }, {
                hide: false,
                disable: false,
                checkOnEnable: false,
            });
        });
    </script>
</head>
<body>


<input type="checkbox" id="first"> 1
<br>
<br>
<br>
<input type="checkbox" id="second"> 2


</body>
</html>

I want to each checkbox unchecks if another is checked but it doesn't work properly sometimes.
It works only on second time check.

Can you also update dependsOn.min.js when you're doing release, because I can't right away understand that it's out of date and I have to run gulp manually to build final file. Not everybody uses gulp or bower and they just need final file.

Thanks.

where is the min file

i dont see this file anywhere dependsOn.min.js when i use composer to download from bower/asset

Should trigger 'change' events when dependsOn changes the value of the subject

Refs #17.

Add a range qualifier

Might accept an array with three values similar to the arguments for the Python range function.

Dependency chains do not work

Expectation:
When i have an element "1" which depends from element "a", and i have some elements which depend from element "1", i expect that these elements gets hidden when "1" gets hidden.

Code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="./dependsOn.min.js"></script>
</head>
<body>
<div class="chars">
    Chars<br />
    <label class="form__labelradio">A
        <input class="depA" type="radio" name="char" value="a"/>
    </label>
    <label class="form__labelradio">B
        <input class="depB" type="radio" name="char" value="b"/>
    </label>
    <label class="form__labelradio">C
        <input class="depC" type="radio" name="char" value="c"/>
    </label>
</div>
<hr />
<div class="numbers">
    Numbers<br />
    <label class="form__labelradio">1
        <input class="dep1" type="radio" name="number" value="1"/>
    </label>
    <label class="form__labelradio">2
        <input class="dep2" type="radio" name="number" value="2"/>
    </label>
    <label class="form__labelradio">3
        <input class="dep3" type="radio" name="number" value="3"/>
    </label>
</div>
<hr />
<div class="animals">
    Animals<br />
    <label class="form__labelradio">Dog
        <input class="depDog" type="radio" name="animal" value="dog"/>
    </label>
    <label class="form__labelradio">Cat
        <input class="depCat" type="radio" name="animal" value="cat"/>
    </label>
    <label class="form__labelradio">Frog
        <input class="depFrog" type="radio" name="animal" value="frog"/>
    </label>
</div>
<script>
    $(function () {
        $('.dep1').dependsOn({
            'input[name="char"]': {values: ['a']}
        });
        $('.depDog').dependsOn({
            'input[name="number"]': {values: ['1']}
        });
        $('.depCat').dependsOn({
            'input[name="number"]': {values: ['1']}
        });
        $('.depFrog').dependsOn({
            'input[name="number"]': {values: ['1']}
        });
    });
</script>
</body>
</html>

Demo: https://jsfiddle.net/5rd3ogkf/

Steps to reproduce:

Klick "A". You can see "1" appears.
Klick "1". You can see the animals appear.
Klick "2". You can see the animals disappear.
Klick "1" again. You can see the animals appear again.
Klick "B". You can see "1" disappears. That's correct. But the animals are still there. Because "1" is hidden, i expect that the animals are hidden too.

Tested in Firefox 57 and Chrome 62.

"checked" qualifier doesn't work on radio buttons

The "checked" qualifier doesn't work on radio buttons as documented.

Option to toggle the container of the input rather than ID & associated label

Consider this markup:

<div class="field">
    <label for="keywords">Keywords</label>
    <input id="keywords" name="keywords" type="text">
    <p>Pro tip: blah blah blah</p>
</div>

Currently the protip would be left in limbo if hidden, it would be great to tell dependsOn to target the parent container of the target on show/hide operations.

Cant make checked:true works, and value of that checked

Hello,

Thank you for your wonderful plugin, im using it for a project.

The idea is, user will select dependant fields. Exp:

Field A will appear when Field B "is checked" and "checked value is 123".

I dont know why but i can make it work with is, not, containt, but cant make it work with checked.

I hope you can give me an suggestion or how can i archive this?.

Thanks!

Empty String Values and on Input

Hi, I made a couple small mods to your core plugin, wanted to share them here.

If the value checking against is "" (empty string), a space in the field would register as a non-match. So I modified your Not function like so:

Dependency.prototype.not = function(checkAgainst)
{
var dependencyValue = this.$dependencyObj.val(),
length = checkAgainst.length,
i = 0;
for(i; i < length; i += 1)
{
var theValue = checkAgainst[i] == '' ? $.trim(dependencyValue) : dependencyValue;
if(checkAgainst[i] === theValue)
{
return false;
}
}
return true;
};

Also, I noticed that dependencies in text inputs and textareas are only triggered on blur, so I modified your addSet function like so (changing the on 'change' function to on 'change click input'):

DependencyCollection.prototype.addSet = function(set)
{
var self = this,
thisSet = 0,
numDependencies = 0,
d = 0,
dependency;
this.dependencySets.push(new DependencySet(set));
thisSet = this.dependencySets.length - 1;
numDependencies = this.dependencySets[thisSet].dependencies.length;
for(d; d < numDependencies; d += 1)
{
dependency = this.dependencySets[thisSet].dependencies[d];
dependency.$dependencyObj.on('change click input', function(e)
{
self.triggeredEvent = e;
self.triggeredDependency = this;
self.check();
});
/* commenting out this part now
if(dependency.$dependencyObj.attr('type') === 'text')
{
dependency.$dependencyObj.on('input', function(e)
{
if(e.which && dependency.$dependencyObj.is(':focus'))
{
if(self.check())
{
self.triggeredEvent = e;
self.triggeredDependency = this;
self.check();
}
}
});
}
end commented out */
}
};

Cleanup non issue

When my account was compromised a spam issue was created in this repo. I sincerely apologize. Cleaning up such issues via script.

Issues with form loaded via AJAX

Hello,

In my app, I'm showing a modal window, which a form, that is being loaded via AJAX.
It's HTML is added using $().html() jQuery method.

Unfortunately, even when adding dependencies after adding HTML form content, as seen below:

$('.ajax-content', modal).html(response);
initProductDependencies();

...

function initProductDependencies()
{
        $('#something').dependsOn({
            '#otherthing': {
                checked: true
            }
        });
}

I got an error message saying:

Uncaught TypeError: Cannot read property 'nodeName' of undefined

Any workarounds?

Pass subject through callbacks

add qualifier based on text node value

if we had OTHER

it would be nice to be able to select based on OTHER

.or method doesn't work properly in Firefox

I have this mini site:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="./dependsOn.min.js"></script>
</head>
<body>
    <div class="field field-numbers">
        <label>Number</label>
        <select name="numbers">
            <option>One</option>        
            <option>Two</option>
            <option>Three</option>
        </select>
    </div>
    <div class="field field-chars">
        <label>Char</label>
        <select name="chars">
            <option>A</option>        
            <option class="depend-B">B</option>
            <option>C</option>       
            <option>D</option>
        </select>
    </div>
<script>
$(function() {
        $('.depend-B').dependsOn({
                '.field-numbers  select': {
                    values: ['One']
                }
        }).or({
                '.field-numbers select': {
                    values: ['Two']
                }                     
        });
});
</script>
</body>
</html>

When i choose number "Two", the char "B" gets hidden in the chars select list. That happens in Firefox 52. "B" is correctly still there in Google Chrome 54 and Opera 43.

When i change the JS to

$('.depend-B').dependsOn({
        '.field-numbers  select': {
            values: ['One','Two']
        }
});

it works also in Firefox.

.or method doesn't work properly on document.ready()

Version v1.4.0.

Hello, I found one bug: when I use .or method dependent element is not visible after page load, but it has to be.
If I check checkbox manually it works ok.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script src="./jquery-3.1.1.min.js"></script>
    <script src="./dependsOn.min.js"></script>

    <script>
        $(function () {

            $("#text").dependsOn({
                "#c1": {
                    checked: true
                }
            }, {}).or({
                "#c2": {
                    checked: true,
                }
            })
        });
    </script>
</head>
<body>

<input checked type="checkbox" id="c1"> 1
<br>
<input  type="checkbox" id="c2"> 2

<input type="text" id="text">

</body>
</html>

If second checkbox is checked, it works fine.

Nested Dependencies Issue

Hi. Thanks for this terrific plugin. I've run into an issue when I have a field dependent upon a dependent field. The structure goes like this:

if checkbox1 is checked, show radio1
if checkbox1 is checked and radio1 has value of "partial", show textinput1

no.2 works if I disable no.1, but it does not work if no.1 is active.

$("div#container_smartcare_scheduling_ot_type")
.dependsOn({"input[type='checkbox'][name='smartcare_scheduling_overtime']":{checked:true}},{valueOnDisable:"",checkOnDisable:false,duration:500});

$("div#container_smartcare_scheduling_ot_hours")
.dependsOn({"input[type='radio'][name='smartcare_scheduling_ot_type']":{values:["partial"]},"input[type='checkbox'][name='smartcare_scheduling_overtime']":{checked:true}},valueOnDisable:"",checkOnDisable:false,duration:500});

If I remove the first block, the second block works. If I add the first block, the second block does not work.

Am I doing something incorrectly or is this a little bug?

Thanks for your time!

Doesn't support latest version of jquery

Just what it says. Jquery 3.0 gives the classic Uncaught TypeError: a.indexOf is not a function in the console when versions don't match.

No dist included in npm install

When installing the package through node.js, there is an extra step to build locally since there is no dist directory in the repo and none is built automatically on the install.

Doesnt seem to work with div.

I'm trying to show a div based on input value but it doesnt seem to be working.

$('#divID').dependsOn({
'input': {
enabled: true,
values: ['xyz', 'true']
}
});

Cannot read property 'nodeName' of undefined

Hey mate,

It's me again, im looking for the error but not sure what happened to mine, here's my demo page http://demo.comfythemes.com/woocommerce-checkout-template/ you have to add to cart first (on the menu), then go to http://demo.comfythemes.com/woocommerce-checkout-template/checkout/ , viewsource you will get

<script type='text/javascript'>
                (function($) {
                    'use strict';

                        $('#wct_33_field').dependsOn({

                                    "#billing_email": {
                                                                                        values: ['[email protected]']
                                                                                    },



                                    "#billing_phone": {
                                                                                        not: ['123456']
                                                                                    },


                                                    });
                                    })(jQuery);
            </script>

Can you please take a look?, since it's your core so i dont know how to deal with it.

Thanks mate

Add a bower.json

Would be super useful for consumers of this nice little lib!

Provide 'readonly' as an option in addition to 'disabled'

dependsOn misses programmatic changes (including those it made itself)

In a chain of dependencies, the dependency checks do not propagate down the chain.

The reason is that dependsOn (quite obviously) relies on the onchange event to trigger dependency checks, but the onchange event is only raised by user actions, not by changes caused by JS code.

If after a user action, dependsOn makes a change (disabling an element or changing its value), this may change the status of a different dependency. However, the corresponding dependency check is never triggered as the change made by dependsOn did not raise an onchange event.

Imagine a sequence of three dropdown lists in a car configurator form:
make
model
trim line

Model depends on Make, and Trim line depends on Model. If you select a make, you get to choose from the available models, and upon selecting a model, you are shown a list of the trim lines available for that model. Now if you change your mind and select a different make, the model list is updated. However, dependsOn does not detect the change in the model list (as there has been no onchange event), and the previous (now wrong) trim line list continues to be displayed.

On all occasions I have observed this problem, it would have been desirable for dependsOn to send a change event on disabling, enabling, or changing an element. Technically, when enabling/disabling, the element's value does not really change, but the value of its container element can change. For instance if the selected option element is disabled, the value of the containing select changes to null (or, with multiple selections, its value is presumably removed from the array of selected values). To work around this, I have changed the source to trigger an onchange event whenever an element is enabled or disabled (the code below is for DependencyCollection.prototype.enable; the change is analogous for disable or for changing the value of valueSubject:
New:

    // Remove the disabled attribute from the subject if allowed by the settings
    if ( this.settings.disable &&
                 this.$subject.attr( 'disabled' ) !== undefined ) {
        this.$subject.removeAttr( 'disabled' );
        this.$subject.trigger( 'change' );
    }

Old:

    // Remove the disabled attribute from the subject if allowed by the settings
    if ( this.settings.disable ) {
        this.$subject.removeAttr( 'disabled' );
    }

This obviously introduces the possibility of endless check loops for circular dependencies, but still I think a front-end option for this would be a great addition to dependsOn. Lacking a specific onchange option for dependsOn(), the obvious place to put this trigger('change') call would be onEnable and onDisable. However, the callback parameters triggeredDependency and triggeredEvent contain no reference to the dependency subjects, so that this information would need to be hardwired into the callback function, which means that a specific callback function would be needed for every dependent element.

Or maybe I have missed something obvious.
Endre

Enable based on any value entered in preceding text field

Great plugin. Just what I was looking for. A nice extra in the configuration would be whether a preceding text field has any value at all. I tried not: [''] but that didn't seem to work. Maybe an 'empty' boolean qualifier could be added.

Add unit tests

Dependency.values() always accepts null

Regardless of the content of the values qualifier (e.g. ['one', 'two', 'three']), Dependency.values() always seems to accept null as a pass value.
As far as I could determine, this happens because of a chain of two unintuitive (to me) behaviours in JS and jQuery, respectively:

typeof(null) === object is true (~ line 97 in dependsOn-1.0.1.js)
$('string').not($(null)).length === 0 is true (~ line 101 in dependsOn-1.0.1.js)

A workaround is to always specify the not qualifier when you want to exclude null, e.g.:
$(selector).dependsOn({'#id': {values:['one', 'two'], not: [null]}});

Overall, dependsOn is definitely the best invention since HTML forms and jQuery. Great documentation, very capable and it just works. Thanks David!

Endre

Add option to change event that triggers dependency checks

refs #6

Custom event for each dependency

It would be nice to have customizable trigger events for each dependency.

ex. iChecks.js uses event "ifChanged" instead of "changed" event

Add empy and notEmpty qualifiers

refs #2 and #6

Feature request: refresh selection when option hidden

When i remove options from a select list, and the selection is on one of this hidden options, the selection should be refreshed, so it is on a visible option.

Example:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="./dependsOn.min.js"></script>
</head>
<body>
    <div class="field field-numbers">
        <label>Number</label>
        <select name="numbers">
            <option>One</option>        
            <option>Two</option>
            <option>Three</option>
        </select>
    </div>
    <div class="field field-chars">
        <label>Char</label>
        <select name="chars">
            <option>A</option>        
            <option class="depend-B">B</option>
            <option>C</option>       
            <option>D</option>
        </select>
    </div>
<script>
$(function() {
        function checkSelectsOptionsVisibilty(selector)
        {
            if ($(selector + ' option:selected').is(':disabled')) {
                $(selector + ' option').each(function () {
                    if ($(this).css('display') != 'none') {
                        $(this).prop("selected", true);
                        return false;
                    }
                });
            }
        }

        $('.depend-B').dependsOn({
                '.field-numbers  select': {
                    values: ['One','Two']
                }
        }, {
                    onDisable: function() { checkSelectsOptionsVisibilty('.field-chars select');}
        });
});
</script>
</body>
</html>

Select char "B", then number "three". The selection "jumps" now to char "A", because "B" is now hidden.

It would save a lot of code lines on longer forms, if the functionality of checkSelectsOptionsVisibilty() would be somehow be included in dependsOn.

First animation problem

Version 1.3.1.
I face small issue when subject is activated / deactivated first time and show / hide animation is not working. jQuery shows / hides element instantly. Animation works only on the next actions.

Toggling <select> options does not trigger enable/disable on dependent fields - workaround

Thanks for all the work on your superb plugin.

I wanted the dependent fields to enable/disable when selecting options in a with a keyboard using the up/down arrows. The default browser behaviour (by design) is that this change event does not occur until the loses focus or the user presses ENTER on the keyboard. To override this and get the behaviour I wanted I added this:

$( "select" ).bind('keyup', function(e) {
    $(  '#' + e.target.id ).trigger('change');
});

I hope this helps someone

When is onDisable callback fired?

I try to count the visible option elements of a select field. When there is only on visible option left the parent DIV and its content should be hidden.

This works on the inital page load. But after switching the dependecy input field, the visible option elements are beeing "counted wrong". I can't find the reason for that strange behavior of the onDisable callback.

The sample code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="./dependsOn.min.js"></script>
</head>
<body>
 <form action="/index.php" method="post">
                                    
        <div class="field   field-Course-type">
    
            <div class="field__inner form form--radio">
                <label class="form__label">Type</label>
                
                <div class="form__radioboxwrap">
                    
                    <div class="form__radiobox ">
                        <label class="form__labelradio">A
                            <input required="required" id="depend_id_1" type="radio" name="type" value="A" />
                        </label>
                    </div>
                
                    <div class="form__radiobox ">
                        <label class="form__labelradio">B
                            <input required="required" id="depend_id_4" type="radio" name="type" value="B" />
                        </label>
                    </div>
        
                </div>
            </div>
        
        </div>
                    
        <div class="field__inner form form--select">

            <label class="form__label" tabindex="50">Subtype</label>
            <select name="sub">
                <option value="">-- please select --</option>
                <option class="dep11" value="1">1</option>
                <option class="dep12" value="2">2</option>
                <option class="dep13" value="3">3</option>     
            </select>
        
        </div>
                
    </form>

 <script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
    (function($) {
        $(document).ready(function() {

            function hideFieldIfAllSelectOptionsAreHidden(selector)
            {
                console.log('HIDE CHECK');

                var amountVisible = $(selector).find('option:visible').length;
                var amountHidden = $(selector).find('option:hidden').length;
                console.log('VISIBLE CHECK RESULT: ' + amountVisible);
                console.log('HIDDEN CHECK RESULT: ' + amountHidden);

                if (1 >= amountVisible) {
                    $(selector).closest('.form--select').hide();
                    console.log('HIDE');
                }
            }

            function showFieldIfAllSelectOptionsAreHidden(selector)
            {
                console.log('SHOW CHECK');
                if ($(selector).closest('.form--select').is(':hidden')) {
                    $(selector).closest('.form--select').show();
                    console.log('SHOW');
                }
            }
    
            $('.dep11').dependsOn({
                'input[name="type"]': {                    
                    values: ['B']
                }                            
            }, {
                onEnable: function() { showFieldIfAllSelectOptionsAreHidden('.form--select select'); },
                onDisable: function() { hideFieldIfAllSelectOptionsAreHidden('.form--select select'); }
            });
                        
            $('.dep12').dependsOn({
                'input[name="type"]': {
                    values: ['B']
                }
            }, {
                onEnable: function() { showFieldIfAllSelectOptionsAreHidden('.form--select select'); },
                onDisable: function() { hideFieldIfAllSelectOptionsAreHidden('.form--select select'); }                                
            });
                   
            $('.dep13').dependsOn({
                'input[name="type"]': {   
                    values: ['B']
                }            
            }, {
                onEnable: function() { showFieldIfAllSelectOptionsAreHidden('.form--select select'); },
                onDisable: function() { hideFieldIfAllSelectOptionsAreHidden('.form--select select'); }     
            });
                
        });
    })(jQuery);
});
</script>


</body>
</html>

When i load the page i get this console output:

HIDE CHECK  
VISIBLE CHECK RESULT: 3  
HIDDEN CHECK RESULT: 1  
HIDE CHECK  
VISIBLE CHECK RESULT: 2  
HIDDEN CHECK RESULT: 2  
HIDE CHECK  
VISIBLE CHECK RESULT: 1  
HIDDEN CHECK RESULT: 3  
HIDE

There we see that after the inital load all the depended select options are beeing hidden. And when there is only one element left, the parent DIV is also beeing hidden.

Now i click on the radio button "B" and the select input is shown with all its options. Now clicking "A" again. The three depended select options are beeing hidden. But the counter doesn't count correct as you can see here:

HIDE CHECK  
VISIBLE CHECK RESULT: 4  
HIDDEN CHECK RESULT: 0  
HIDE CHECK  
VISIBLE CHECK RESULT: 4  
HIDDEN CHECK RESULT: 0  
HIDE CHECK  
VISIBLE CHECK RESULT: 4  
HIDDEN CHECK RESULT: 0

Add 'readonly' as an option in addition to 'disabled'

My form fields will not validate if disabled when using Zend Framework. The way to get round this is to set them with the attribute 'readonly' so it would be nice to have this as an additional option.

Add build task to create release package

Release package should include min file, readme, and license.
As noted in #29