Disable Element If

Question

This is a pretty straightforward library function I've got here. I've had to build it in to about 3 different forms but I never heard of this kind of function anywhere else.

I'm trying to make it as readable and clear as possible, but I also am not too familiar with the best way to capture values in JavaScript. As far as I know, the following disableChecker function allows me to capture the value arguments at declaration time so I can have many of these DisableIf checks going simultaneously.

 function disableChecker(checkSelector, disableValue, targetSelector) {
 var optionValue = $(checkSelector).val();
 if (optionValue === disableValue) {
 $(targetSelector).prop("disabled", true); //Disable target
 } else {
 $(targetSelector).prop("disabled", false); //Enable target
 }
 }
 function DisableIf(checkSelector, disableValue, targetSelector) {
 $(checkSelector).on("change,keyup,blur", disableChecker(checkSelector, disableValue, targetSelector));
 }

Usage:

<select id="disableSource">
 <option value="0">Disable Next</option>
 <option value="1">Enable Next</option>
</select>
<input type="text" id="disableTarget" />
<input type="text" id="disableTarget2" />
<script type="text/javascript">
 //Please note that at this time, order is important!
 DisableIf("#disableSource", "0", "#disableTarget");
 DisableIf("#disableTarget", "Disable Next", "#disableTarget2");
 DisableIf("#disableSource", "0", "#disableTarget2");
<script>

jsFiddle

Answer 1

Readability:

Merging code into a single line:

• Variables - If the function isn't too complex to understand, variable declarations that are only used in a single location are unnecessary.

• If-statements - If-Statements take a boolean and do something different based on the boolean. If you're toggling a value like "disabled" you usually can just pass the boolean straight to the value-setter.

  function disableChecker(checkSelector, disableValue, targetSelector) {
   $(targetSelector).prop("disabled", $(checkSelector).val() === disableValue);
  }
  

Library:

• Naming - It should be clear-er to anyone working with the code what each function does (whether this person be you, someone else, or you 6 months from now).
• Condition - Why force it to always be an equality condition? Perhaps in the future you may want it to be greater-than or something even more complex? By passing in a boolean parameter instead you expand your library function's potential.
• Maintainability - Single Responsibility Principal. Each function does one specific thing so that if any of the parts change they aren't all affected.
• Initialization - This is the only slight down-side that I see. It takes a little bit more code turning the condition into a parameter. But flexibility and readability usually come at some kind of cost (generally in the setup or performance departments). Given that it's a library function though, you're probably wanting that flexibility.

Something like:

function setDisable(targetSelector, isDisabled) {
 $(targetSelector).prop("disabled", isDisabled); 
}
function valueEqualsExpected(selector, expectedValue) {
 return $(selector).val() === expectedValue;
}
function turnOnAndRunEvent(events, selector, func) {
 $(selector).on(events, func);
 //$(document).on(events, selector, func);
 func();
}
turnOnAndRunEvent("change keyup blur", "#disableSource", function () {
 setDisable("#disableTarget", valueEqualsExpected("#disableSource", "0"));
});
turnOnAndRunEvent("change keyup blur", "#disableTarget", function () {
 setDisable("#disableTarget2", valueEqualsExpected("#disableTarget", "Disable Next"));
});
turnOnAndRunEvent("change keyup blur", "#disableSource", function () {
 setDisable("#disableTarget2", valueEqualsExpected("#disableSource", "0"));
});

JSFiddle