jQuery disattiva elemento modulo quando la casella è selezionata

Question

Ho un modulo jQuery complicato e voglio disabilitare diversi elementi del modulo se una determinata casella è selezionata. Sto usando jQuery 1.3.2 e tutti i plugin rilevanti. Cosa sto facendo di sbagliato qui? Grazie, Dakota

Ecco il mio 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> 

Ecco il mio 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

ci sono un paio di cose che dovrebbe essere cambiato. Prima di tutto, la struttura HTML effettiva non corrisponde a ciò che stai richiedendo in JavaScript (in particolare la chiamata parents()). In secondo luogo, il binding all'evento click fornirà un supporto migliore in IE poiché a volte IE attende di generare l'evento change fino a quando l'elemento non viene messo a fuoco.

$('.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'> non è un genitore per $('.element-toggle input') è il vostro esempio

Answer 3

E 'stato utile. Se qualcuno è alla ricerca di un plugin, qui si va: http://s.technabled.com/jquery-foggle

Answer 4

solo un bocconcino: dal jquery 1.6 non si dovrebbe usare $(this).attr('checked') che è sempre vero, ma piuttosto $(this).prop('checked').

Si consiglia inoltre di utilizzare $(this).prop('disabled') (per verificare se l'elemento è disabilitato) e $(this).prop('disabled', newState) anziché attr.