Перемещение dom, поиск ближайшего предыдущего checkbox

Question

Я пытаюсь пересечь dom в приведенном ниже коде и только с блоком мысленно. Я хотел бы включить флажок в предыдущей .form-input-wrapper.

<div> 
    <div class="form-input-wrapper inline-radio-buttons"> 
    <span class="button-label">Setup - Ready</span> 
    <span> 
     <input id="status_0" name="status[0]" type="hidden" value="setup_ready">   
     <input checked="checked" disabled="disabled" id="status_0" name="status[0]" type="checkbox" value="setup_ready"> 
    </span> 
    </div> 
    <div class="form-input-wrapper inline-radio-buttons"> 
    <span class="button-label">Setup - Required</span> 
    <span> 
     <input id="status_1" name="status[1]" type="hidden" value="setup_required"> 
     <input checked="checked" disabled="disabled" id="status_1" name="status[1]" type="checkbox" value="setup_required"> 
    </span> 
    </div> 
</div> 

Я пробовал несколько вещей. Это то, что я сейчас делаю:

(ПРИМЕЧАНИЕ: это контекст). В принципе, у меня есть столбец флажков. Если они проверены, они отключены, за исключением последнего. если вы снимете последнее, я хочу включить флажок выше.

$(@checkboxes).live 'click', -> 
    if $(this).is(':checked') 
    return 
    else 
    console.log "$(this).parents() ", $(this).parent().prev().has(':checkbox').first().find(':checkbox') 
    console.log $(this) 
    $(this).parent().prev().has(':checkbox').first().find(':checkbox').disabled = false 
    return 

, если я вхожу:

$(this).parent().prev().has(':checkbox').first().find(':checkbox') 

этот журнал будет просто распечатать элемент я нажал на.

Answer 1

Вам нужно подняться на 2 уровня, но я считаю, что лучше использовать .closest() для указания селектора, а не жесткого кодирования количества уровней в коде.

Для первого, использования:

$(this).closest(".inline-radio-buttons").siblings().first().find(":checkbox").prop("disabled", false); 

Для предыдущего, использование:

$(this).closest(".inline-radio-buttons").prev().find(":checkbox").prop("disabled", false); 

Answer 2

Вы попробовали $(this).parentsuntil('elem')?

Answer 3

Используйте .removeAttr('checked') если мыши.

Пример:

$('input').bind('click', function() { 
$('.inline-radio-buttons').last().find('input').removeAttr('disabled').removeAttr('checked'); 
}); 

Answer 4

я изменил следующее, чтобы привести его к работе:

• Использование closest вместо parent, поскольку это является более стабильным, потому что вы можете гнездо столько, сколько вы хотите, то.
• Не используйте first в этот момент, потому что prev вернет 1 или 0 элементов. first ничего не меняет.
• Добавлен элемент в HTML, который не имеет disabled="disabled"
• Изменено .disabled = false к .removeAttr('disabled') (я думаю .disabled = false не будет работать)

jQuery(window).ready(function() { 
 
    $(':checkbox').live('click', function() { 
 
    if($(this).is(':checked')) 
 
     return; 
 
    $(this).closest(".form-input-wrapper").prev().has(':checkbox').find(':checkbox').removeAttr('disabled'); 
 
    return; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
 
<div> 
 
    <div class="form-input-wrapper inline-radio-buttons"> 
 
    <span class="button-label">Setup - Ready</span> 
 
    <span> 
 
     <input id="status_0" name="status[0]" type="hidden" value="setup_ready">   
 
     <input checked="checked" disabled="disabled" id="status_0" name="status[0]" type="checkbox" value="setup_ready"> 
 
    </span> 
 
    </div> 
 
    <div class="form-input-wrapper inline-radio-buttons"> 
 
    <span class="button-label">Setup - Required</span> 
 
    <span> 
 
     <input id="status_1" name="status[1]" type="hidden" value="setup_required"> 
 
     <input checked="checked" disabled="disabled" id="status_1" name="status[1]" type="checkbox" value="setup_required"> 
 
    </span> 
 
    </div> 
 
    <!-- Element inserted by me to be able to test one without disabled="disabled" --> 
 
    <div class="form-input-wrapper inline-radio-buttons"> 
 
    <span class="button-label">Setup - 3</span> 
 
    <span> 
 
     <input id="status_2" name="status[2]" type="hidden" value="setup_required"> 
 
     <input checked="checked" id="status_2" name="status[2]" type="checkbox" value="setup_required"> 
 
    </span> 
 
    </div> 
 
</div>