[英]jquery when checkbox is not checked hide a textbox
我有一個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
,但是重新啟用它無效,請問我做錯了什么?
更新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>
根據您的OP,它看起來像您對跨度的綁定。 更改為綁定到您的復選框。 也將綁定從單擊更改為更改。 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'));
});
通用使用類,但不使用復選框的ID。 只是使用其他選擇器。
$('.cbStopReason > input[type=checkbox]').on('change', function () {
var $this = $(this);
$this.parent().nextAll("input").prop("disabled", !$this.is(':checked'));
});
在呈現的代碼中,您將不再具有cbStopReason
類的復選框-該類將應用於span
並且將永遠不會checked
span。
一種解決方法是將條件更改為:
$(this).find("input").attr('checked')
您將事件處理程序綁定到錯誤的元素(選擇器)。 另外,您可以減少很多代碼。
我會這樣做:
$(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'));
});
});
使用if ($(this).is(':checked'))
代替。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.