2013-12-18 3 views
0

Вопрос: Как включить/отключить ввод с помощью флажка?JS checkbox включить/отключить ввод

Каждый флажок включает/отключает ввод рядом с ним. Количество групп различно (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); 
}); 
+0

http://jsfiddle.net/tDCB9/12/ – asprin

ответ

4

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

$('input[type="checkbox"]').change(function(){ 
    $(this).nextUntil(':not(input:text)').prop('disabled', !this.checked) 
}).change() 

Демы: Fiddle

+0

почему не ' $ (this) .nextUntil (': checkbox') '? –

+0

@RoyiNamir Потому что это будет включать тег '
'. – David

+0

@ Давид Да. did not заметили, что br :-) –

1

вашего код работает, это просто вопрос простой цитаты/кавычек,

$("input[name='group1'][type='checkbox']") 

Demo Corrected

0

Попробуйте это:

$("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"); 
    } 
}); 
0

Вот working fiddle.

$('input[type="checkbox"]').click(function() { 
    $(this).siblings('input').attr('disabled', this.checked); 
}); 

Вам просто нужно разделить группы ввода в контейнере.

0

Попробуйте

$("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); 
}); 
0

Вы можете использовать простой селектор:

$('input:checkbox').change(function(){ 
     $(this).nextUntil('br').prop('disabled', !this.checked) 
    }).change(); 
0

Try This

$("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); 
}); 
Смежные вопросы