Выбор 2 дочерних элементов после элемента флажка

Question

У меня следующая структура кода:

<input type="checkbox" name="some_name_1" value="some_val" />
<input type="text" name="input_name_1" value="xxx" />
<input type="text" name="input_name_2" value="yyy" />

<input type="checkbox" name="some_name_2" value="some_val" />
<input type="text" name="input_name_3" value="xxx" />
<input type="text" name="input_name_4" value="yyy" />

Что я пытаюсь сделать:

При установке флажка, флажок Im check is флажок установлен.Если нет, то я отключаю первый (дочерний) и второй (дочерний) входы.Так что я застрял с кодом JQuery:

$("input:checkbox[name*=some_name_]").click(function(){
     if(typeof $(this + ":checked").val() == "undefined"){
       //disable two child inputs               
     }else{
       //enable two child inputs    
     }
});

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

Есть идеи?

Ваша помощь будет принята.

Отредактировано:

А что, если я добавлю несколько дополнительных тегов в мой HTML:

<table>
    <tr>
        <td>
           <input type="checkbox" name="some_name_1" value="some_val" />
        </td>
        <td>       
          <input type="text" name="input_name_1" value="xxx" />
        </td>
        <td>   
          <input type="text" name="input_name_2" value="yyy" />
        </td>
    </tr>
</table>

Как мне изменить код JQuery в соответствии с этими изменениями HTML?

Answer 1

$("input:checkbox").change(function(){ // when the value changes, not just clicks
    if (this.checked) { // if the checkbox is checked
        $(this)
            .next() // select the next element
                .removeAttr('disabled') // enable it
                .next() // and the next one
                    .removeAttr('disabled'); // enable that one too
    } else { // otherwise
        $(this)
            .next() // select the next element
                .attr('disabled', true) // disable it
                .next() // and the next one
                    .attr('disabled', true); // disable that too
    }
}).change(); // trigger immediately to get the elements disabled if necessary

jsFiddle .

См. Справочные страницы:

• attr
• removeAttr
• next
• change

---

Обратите особое внимание на проблему с этой строкой в ​​вашем вопросе:

if(typeof $(this + ":checked").val() == "undefined"){

Вы не можете объединить элемент и строку. Более того, это не способ проверить, существует ли элемент. Это необходимо сделать с помощью свойства length:

if ($(this).filter(':checked').length) {

или лучше:

if ($(this).is(':checked')) {

или, что еще лучше, в соответствии с моим кодом:

if (this.checked) {

Answer 2

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

$("input:checkbox[name*=some_name_]").click(function() {
    if ($(this).is(':checked')) {
        $(this).nextUntil(':checkbox').filter('input').attr('disabled', true);
    } else {
        $(this).nextUntil(':checkbox').filter('input').removeAttr('disabled');
    }
});

демо при http://jsfiddle.net/7hSu7/

Answer 3

Самый простой способ добиться этого - это:

$('input:checkbox').click(
    function(){
        if ($(this).is(':checked')){
            $(this).siblings('input:text').attr('disabled',true);
        }
        else {
            $(this).siblings('input:text').removeAttr('disabled');
        }
    }).change();

JS Fiddle demo .

Отредактировано в ответ на комментарий @ Alnitak ниже:

это работает только потому, что вы изменили отметку

СледующееjQuery избегает этой «проблемы» и работает с кодом, представленным ниже:

$('input:checkbox').click(    
    function() {
        if ($(this).is(':checked')) {
            $(this).nextUntil('input:checkbox').attr('disabled',true);
        }
        else {
            $(this).nextUntil('input:checkbox').removeAttr('disabled');
        }
    }).change();

Пересмотренная демонстрация JS Fiddle .

Answer 4

Если вы можете изменить HTML, вы можете попробовать что-то вроде этого:

<div class="parentDiv">
<input type="checkbox" name="some_name_1" value="some_val" />
<input class="textBox" type="text" name="input_name_1" value="xxx" />
<input class="textBox" type="text" name="input_name_2" value="yyy" />
</div>

Тогда для javascript я бы использовал контекстную функцию jquery.

$("input:checkbox[name*=some_name_]").click(function(){
     var parent = $(this).parent();
     if(typeof $(this + ":checked").val() == "undefined"){
       //disable two child inputs  
       $(".textBox", parent).attr("disabled", "disabled");
     }else{
       //enable two child inputs    
       $(".textBox", parent).removeAttr("disabled");
     }
});

Не самая элегантная вещь, когда-либо написанная, но я думаю, что она должна работать.