JQuery, когда флажок не установлен скрыть текстовое поле

Question

У меня есть textbox и checkbox, когда checkbox снят, мне нужно отключил textbox и когда пользователь выбирает checkbox, я хочу, чтобы повторно включить textbox.

Я попытался это:

код ASP.NET:

<div class="checkConfiguration"> 
    <asp:CheckBox runat="server" ID="stopGeneralNumber" Text="General Number" CssClass="cbStopReason" Checked="false" /> 
    <asp:TextBox runat="server" Enabled="false"></asp:TextBox> 
</div> 

JQuery код

$('.cbStopReason').on('click', function() { 
     if ($(this).attr('checked')) { 
      alert("now checked"); 
      $(this).nextAll("input").removeAttr("disabled"); 
     } else { 
      alert("now un checked"); 
      $(this).nextAll("input").attr("disabled", "disabled"); 
     } 
    }) 

jQuery код уже в document ready function, но проблема в том, что мой код работает хорошо, чтобы отключить textbox, но он не работает, чтобы снова включить его, что я сделал неправильно?

Update 1: Это фактический HTML, который генерируется

<div class="configurationData"> 
          <div class="checkConfiguration"> 
           <span class="cbStopReason"><input id="stopUrgentNumber" type="checkbox" name="stopUrgentNumber"><label for="stopUrgentNumber">Urgent Number</label></span> 
           <input name="ctl17" type="text" disabled="disabled" class="aspNetDisabled"> 
          </div> 
          <div class="checkConfiguration"> 
           <span class="cbStopReason"><input id="stopNurseNurse" type="checkbox" name="stopNurseNurse"><label for="stopNurseNurse">Nurse Number</label></span> 
           <input name="ctl18" type="text" disabled="disabled" class="aspNetDisabled"> 
          </div> 
          <div class="checkConfiguration"> 
           <span class="cbStopReason"><input id="stopScheduledNumber" type="checkbox" name="stopScheduledNumber"><label for="stopScheduledNumber">Scheduled Number</label></span> 
           <input name="ctl19" type="text" disabled="disabled" class="aspNetDisabled"> 
          </div> 
          <div class="checkConfiguration"> 
           <span class="cbStopReason"><input id="stopClockNumber" type="checkbox" name="stopClockNumber"><label for="stopClockNumber">Clock Number</label></span> 
           <input name="ctl20" type="text" disabled="disabled" class="aspNetDisabled"> 
          </div> 
          <div class="checkConfiguration"> 
           <span class="cbStopReason"><input id="stopLastCheckNumber" type="checkbox" name="stopLastCheckNumber"><label for="stopLastCheckNumber">Last Check Number</label></span> 
           <input name="ctl21" type="text" disabled="disabled" class="aspNetDisabled"> 
          </div> 
          <div class="checkConfiguration"> 
           <span class="cbStopReason"><input id="stopArrivalNumber" type="checkbox" name="stopArrivalNumber"><label for="stopArrivalNumber">Arrival Number</label></span> 
           <input name="ctl22" type="text" disabled="disabled" class="aspNetDisabled"> 
          </div> 
          <div class="checkConfiguration"> 
           <span class="cbStopReason"><input id="stopGeneralNumber" type="checkbox" name="stopGeneralNumber"><label for="stopGeneralNumber">General Number</label></span> 
           <input name="ctl23" type="text" disabled="disabled" class="aspNetDisabled"> 
          </div> 
         </div> 

Answer 1

По вашему О.П., это выглядит как ваше связывание на вашем пролете. Изменен, чтобы привязать ваш флажок. Также изменилось привязку с клика для изменения. http://jsfiddle.net/0fL0pumf/1/

$('#stopGeneralNumber').on('change', function() { 
    var $this = $(this); 

    if ($this.is(':checked')) { 
     $this.parent().nextAll("input").prop("disabled", false); 
    } else { 
     $this.parent().nextAll("input").prop("disabled", true); 
    } 
}); 

Уменьшено Javascript ...

$('#stopGeneralNumber').on('change', function() { 
    $(this).parent().nextAll("input").prop("disabled", !$(this).is(':checked')); 
}); 

Generic использовать класс, но не идентификатор флажком. Просто использует другой селектор.

$('.cbStopReason > input[type=checkbox]').on('change', function() { 
    var $this = $(this); 
    $this.parent().nextAll("input").prop("disabled", !$this.is(':checked')); 
}); 

Answer 2

if ($(this).is(':checked')) Используйте вместо этого.

Answer 3

В готовом коде у вас больше нет флажка с классом cbStopReason - этот класс применяется к span, а диапазон никогда не будет checked.

Одним из способов исправить это изменить условный к:

$(this).find("input").attr('checked') 

Answer 4

Вы связывание обработчика событий к неправильному элементу (селектор). Кроме того, вы можете значительно сократить свой код.

Я хотел бы сделать это следующим образом:

$(function() { 
    // On the checkbox click. 
    // Here I would give these checkboxes a particular class 
    // to use on the selector. 
    $('.checkConfiguration input[type=checkbox]').on('click', function() { 
     // Go to its parent and look for the input. 
     // Enable/disable it according to the checkbox 
     // checked value. 
     $(this).closest('.checkConfiguration') 
      .find('input[type=text]') 
      .prop('disabled', !$(this).is(':checked')); 
    }); 
}); 

Demo