Elegantify / just this js?

I'm doing a bunch of on / off selection using checkboxes and inputs and I'm wondering if I can just use this js with loops, variables or compound statements? It just looks like a lot of code for relatively simple functions.

Here's a script for what I am doing:

http://jsfiddle.net/kirkbross/555f2yan/1/

//check to see if checkboxes are checked and enable / disable accordingly
$(".zone-on-off").each(function() {
if (this.checked) {
$(this).parent("div").siblings("div").children("select").prop("disabled", false);
} else {
$(this).parent("div").siblings("div").children("select").prop("disabled", "disabled");
}
});
// enable / disable selects per on/off checkbox
$(".zone-on-off").click(function() {
if (this.checked) {
$(this).parent("div").siblings("div").children("select").prop("disabled", false);
} else {
$(this).parent("div").siblings("div").children("select").prop("disabled", "disabled");
}
});
// enable selects when name is inputted
$(".zone-name").change(function() {
if (this.val().length) {
$(this).parent("div").siblings("div").children("select").prop("disabled", false);
} else {
$(this).parent("div").siblings("div").children("select").prop("disabled", "disabled");
}
});
// input name on enter
$('.zone-name').keypress(function(e) {
if (e.which == 13) {
$(this).blur();
$(this).parent("div").siblings("div").children("select").prop("disabled", false);
}
});

      

+3


source to share


4 answers


This can lead to your requirements. In other words, it should work the same way as before. I just minified the code.

$(function () {
    function updateElements() {
        var disableIt = !$(this).is(':checked');

        $(this).closest('li').find('select').prop('disabled', disableIt);
    }

    function updateElements2() {
        var disableIt = !$(this).val();

        $(this).closest('li').find('select').prop('disabled', disableIt);
        $(this).closest('li').find('.zone-on-off').prop('checked', !disableIt);
    }   

    // Setting up initial state
    $(".zone-on-off").each(updateElements);

    // check and enable / disable selects
    $(".zone-on-off").on('click', updateElements);

    // enable selects when name is inputted
    $(".zone-name").on('input', updateElements2);    
});

      

Demo



Or you can go like this:

$(function () {
    function updateElements() {
        var parentEl = $(this).closest('li');
        var checkboxEl = parentEl.find('.zone-on-off');
        var inputEl = parentEl.find('.zone-name');
        var selectEl = parentEl.find('select');

        var disableIt = true;

        if ($(this).is('[type=checkbox]')) {
            disableIt = !checkboxEl.is(':checked');
        }
        else {
            disableIt = !inputEl.val();
        }

        selectEl.prop('disabled', disableIt);
        checkboxEl.prop('checked', !disableIt);
    }

    // Setting up initial state
    $(".zone-on-off").each(updateElements);

    // check and enable / disable selects
    $(".zone-on-off").on('click', updateElements);

    // enable selects when name is inputted
    $(".zone-name").on('input', updateElements);    
});

      

Demo

0


source


Here's an attempt, not sure about it better, but it works:



function enable(el){ 
   $(el).parents('li').find('select').prop("disabled", false);
}
function disable(el){
   $(el).parents('li').find('select').prop("disabled", "disabled");
}
function check(){
    var el = typeof arguments[0] == "object" ? arguments[0] : this;
    el.checked ? enable(el) : disable(el);
}
function update(e){
    e.type=="change" && this.value ? enable(this) : disable(this);
    e.type=="click" && check(this);
    e.type=="keypress" && e.which == 13 && $(this).blur() && enable(this);
}
$(".zone-on-off").each(check);
$(".zone-on-off").click(update);
$(".zone-name").change(update);
$('.zone-name').keypress(update);

      

0


source


For better user experience use <label>

<label>On / Off: <input type="checkbox" id="zone_1" class="zone-on-off" /></label>

      

jsFiddle

$(".zone-on-off").change(function() {           // IO selects
    $(this).closest("li").find("select").prop("disabled", !this.checked);
}).change();                                    // Trigger to perform the initial check

$(".zone-name").on("input keyup", function(e) { // IO if value inputted
    if(e.which === 13) this.blur();
    $(this).closest("li").find(".zone-on-off").prop("checked", this.value).change();
});

      

The above is even slightly more than your original code (toggles checkboxes in real time as you type, etc.). See demo.

0


source


For something as simple as this, you can easily use search to expand in short lines of code to the node you want to reach. You can also, instead of creating multiple events, do the same thing, create one event and make sure it fires. In the following code I did it with "change", clicking on the checkbox changes using a space to check this change, enter input in input, change.

$('.zone-on-off').on('change', function() {
    $(this).parents('li')
           .find('select')
           .prop('disabled', $(this).is(':checked') ? false : 'disabled')
}).trigger('change');
$('.zone-name').on('keypress', function(e) {
    if (e.which == 13) {
        $(this).parents("li")
               .find('.zone-on-off')
               .prop("checked", $(this).val().length == 0 ? false : 'checked')
               .trigger('change');
    }
});

      

https://jsfiddle.net/k76Lk614/1/

0


source







All Articles