當檢查複選框時，jQuery禁用表單元素

Question

我有一個複雜的jQuery表單，如果某個複選框被選中，我想禁用多個表單元素。我使用jQuery 1.3.2和所有相關的插件。我在這裏做錯了什麼？謝謝，達科他州

這裏是我的HTML：

<li id="form-item-15" class="form-item"> 
     <div class='element-container'> 
      <select id="house_year_built" name="house_year_built" class="form-select" > 
       ...Bunch of options... 
      </select> 
      <input type="text" title="Original Purchase Price" id="house_purchase_price" name="house_purchase_price" class="form-text money" /> 
      <input type="text" title="Current Home Debt" id="house_current_debt" name="house_current_debt" class="form-text money" /> 
     </div> 
     <span class="element-toggle"> 
      <input type="checkbox" id="house_toggle" /> 
      <span>Do not own house</span> 
     </span> 
    </li> 

這裏是我的jQuery：

$('.element-toggle input').change(function() { 
    if ($(this).is(':checked')) $(this).parents('div.element-container').children('input,select').attr('disabled', true); 
    else $(this).parents('div.element-container').children('input,select').removeAttr('disabled'); }); 

Answer 1

有幾件事情應該改變。首先，實際的HTML結構與您在JavaScript中查詢的內容（特別是parents()調用）不匹配。其次，綁定到click事件將在IE中提供更好的支持，因爲IE有時會在元素失去焦點之前等待觸發change事件。

$('.element-toggle input').bind('click', function() { 
    var inputs = $(this).closest('li.form-item').find('div.element-container').children('input,select'); 

    if ($(this).attr('checked')) { 
     inputs.attr('disabled', true); 
    } else { 
     inputs.removeAttr('disabled'); 
    } 
}); 

Answer 2

<div class='element-container'>不是$('.element-toggle input')父母就是你們的榜樣

Answer 3

這很有幫助。如果有人正在尋找一個插件，在這裏你去：http://s.technabled.com/jquery-foggle

Answer 4

只是一個小聞：因爲jquery 1.6你不應該使用$(this).attr('checked')這總是如此，而是$(this).prop('checked')。

也建議使用$(this).prop('disabled')（以測試元素是否被禁用）和$(this).prop('disabled', newState)而不是attr。