優雅/簡單這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() { 
    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 2

下面是一個嘗試，不知道它是由好多了，但是它的工作原理：

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

爲了更好的用戶界面，使用<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(); 
}); 

上述聲明甚至有點超過您最初的代碼更（切換複選框現場您鍵入等..）看演示。

Answer 4

對於像這樣簡單的事情，您可以輕鬆地使用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/