jQuery deaktivieren Formularelement, wenn das Kontrollkästchen aktiviert ist

Question

Ich habe eine komplizierte jQuery Form und ich möchte mehrere Formularelemente deaktivieren, wenn ein bestimmtes Kontrollkästchen aktiviert ist. Ich benutze jQuery 1.3.2 und alle relevanten Plugins. Was mache ich hier falsch? Danke, Dakota

Hier ist mein 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> 

Hier ist meine jQuery ist:

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

Es gibt ein paar Dinge Das sollte geändert werden. Zuallererst stimmt die tatsächliche HTML-Struktur nicht mit dem überein, wonach Sie in JavaScript suchen (speziell der Aufruf parents()). Zweitens bietet die Bindung an das Ereignis click eine bessere Unterstützung im IE, da IE manchmal darauf wartet, das Ereignis change auszulösen, bis das Element den Fokus verliert.

$('.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'> ist kein Elternteil für $('.element-toggle input') ist Ihr Beispiel

Answer 3

Das war hilfreich. Wenn jemand ist für ein Plugin suchen, hier gehen Sie: http://s.technabled.com/jquery-foggle

Answer 4

nur ein Leckerbissen: seit jquery 1.6 Sie nicht $(this).attr('checked') verwenden sollten, die immer wahr ist, sondern $(this).prop('checked').

Es ist auch ratsam, $(this).prop('disabled') zu verwenden (um zu testen, ob das Element deaktiviert ist) und $(this).prop('disabled', newState) statt attr.