jQuery deshabilitar elemento de formulario cuando la casilla de verificación está marcada

Question

Tengo un formulario jQuery complicado y quiero deshabilitar varios elementos de formulario si se marca una casilla determinada. Estoy usando jQuery 1.3.2 y todos los complementos relevantes. ¿Qué estoy haciendo mal aquí? Gracias, Dakota del

Aquí está mi 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> 

Aquí es mi 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

Hay algunas cosas eso debe ser cambiado En primer lugar, la estructura HTML real no coincide con lo que está consultando en JavaScript (específicamente la llamada parents()). En segundo lugar, el enlace al evento click proporcionará un mejor soporte en IE dado que IE a veces esperará para disparar el evento change hasta después de que el elemento pierda el foco.

$('.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'> no es un padre para $('.element-toggle input') es tu ejemplo

Answer 3

Eso fue útil. Si alguien está buscando un plugin, aquí van: http://s.technabled.com/jquery-foggle

Answer 4

sólo un dato: desde jQuery 1.6 no se debe utilizar $(this).attr('checked') que siempre es verdadera, sino más bien $(this).prop('checked').

También es aconsejable usar $(this).prop('disabled') (para comprobar si el elemento está deshabilitado) y $(this).prop('disabled', newState) en lugar de attr.