[英]JS checkbox enable/disable input
問:如何使用復選框啟用/禁用輸入?
每個復選框旁邊的啟用/禁用輸入。 組的數目是多種多樣的(i = 1,2,3,... n)。 默認設置是禁用輸入,並取消選中復選框。
JsFiddle: http : //jsfiddle.net/tDCB9/
HTML:
<input type="checkbox" name="group1" value="">
<input type="text" name="name11" class="stat" value="">
<input type="text" name="name12" class="stat" value="">
<input type="text" name="name13" class="stat" value="">
JS:
$("input[name="group1"][type="checkbox"]").click(function() {
$("input[name="name11"][type="text"]").attr("disabled", !this.checked);
$("input[name="name12"][type="text"]").attr("disabled", !this.checked);
$("input[name="name13"][type="text"]").attr("disabled", !this.checked);
});
您需要為復選框編寫一個change()處理函數,然后使用nextUntil()找出要禁用的輸入字段
$('input[type="checkbox"]').change(function(){
$(this).nextUntil(':not(input:text)').prop('disabled', !this.checked)
}).change()
演示: 小提琴
嘗試這個:
$("input[name='group1'][type='checkbox']").click(function() {
if($(this).prop('checked')){
$("input[name='name11'][type='text']").attr("disabled", 'disabled');
}
else{
$("input[name='name11'][type='text']").removeAttr("disabled");
}
});
這是工作中的小提琴 。
$('input[type="checkbox"]').click(function() {
$(this).siblings('input').attr('disabled', this.checked);
});
您只需要在容器中分離輸入組。
嘗試這個
$("input[name='group1'][type='checkbox']").click(function() {
$("input[name='name11'][type='text']").attr("disabled", !this.checked);
$("input[name='name12'][type='text']").attr("disabled", !this.checked);
$("input[name='name13'][type='text']").attr("disabled", !this.checked);
});
您可以使用簡單的選擇器:
$('input:checkbox').change(function(){
$(this).nextUntil('br').prop('disabled', !this.checked)
}).change();
嘗試這個
$("input[name='group1'][type='checkbox']").click(function() {
$("input[name='name11'][type='text']").attr("disabled", this.checked);
$("input[name='name12'][type='text']").attr("disabled", this.checked);
$("input[name='name13'][type='text']").attr("disabled", this.checked);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.