优雅化/只是这个js？

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

这是一个尝试，不确定它是否更好，但它有效：

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 2

这可能会满足您的要求。换句话说，它应该仍然像以前一样工作。我刚刚减少了代码。

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

或者，你可以这样：

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

对于像这样简单的事情，您可以轻松地使用 find 在短代码行中向下钻取到您想要到达的节点。您也可以创建一个事件并确保它被触发，而不是创建多个事件来做同样的事情。在下面的代码中，我使用“更改”进行了更改，单击复选框是更改，使用空格键检查是更改，在输入中输入 enter 是更改。

$('.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/

Answer 4

要获得更好的用户界面，请使用<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();
});

上面的代码甚至比你的初始代码多一点（在你输入时切换复选框live等...）查看演示。