Question

我正在用复选框和输入做一堆启用/禁用选择，我想知道我是否可以使用循环，变量或复合语句简单地使用这个js？对于相对简单的功能，感觉就像很多代码。

这是我正在做的事情的小提琴：

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);
}
});

Answer 1

This might achieve your requirements. In other words, it should still work just like before. I've just reduced 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 this way:

$(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

Answer 2

Here's an attempt, not sure it's better by much, 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);

Answer 3

For a better UI, 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 does even a bit more than your initial code (toggles checkboxes live as you type etc...) See the demo.

Answer 4

For something simple like this you can easily use find to drill down in short lines of code to the node you want to reach. You can also instead of creating multiple events to do the same thing, create one event and make sure it gets triggered. In the following code I did that with 'change', checkbox click is change, using spacebar to check is change, typing enter in the input is 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/

Elegantify /只是这个js？

4 个答案: