변경/변경 안함 확인란 자바 스크립트의 불투명도 레이블

Question

일련의 8 개의 체크 박스가 있습니다. 각 확인란에는 자체 레이블이 있으며 레이블에는 단일 배경색이 있습니다. 선택한 모든 체크 상자의 불투명도를 변경하는 새 클래스를 추가하고 사용자가 확인란을 선택 취소하면 불투명도를 다시 원래 불투명도로 변경해야합니다. 체크 박스를 선택하면 부모 요소에 클래스를 추가하는 바이올린을 설정했지만 필요한 것은 아닙니다. 개별 checkbox div 컨테이너 대신 클래스를 최상위 div에 추가한다는 것을 알 수 있습니다.

http://jsfiddle.net/AftyD/1/

.red { 
background-color:red; 
} 
.opaque { 
opacity: 0.5; 
} 



<div class="form-checkboxes" id="edit-submitted-click-the-looks-you-would-wear"> 
<div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Boho"> 
    <input type="checkbox" class="form-checkbox" value="Boho" name="submitted[click_the_looks_you_would_wear][Boho]" id="edit-submitted-click-the-looks-you-would-wear-1"> 
    <label for="edit-submitted-click-the-looks-you-would-wear-1" class="option"><span class="red">Label 1</span> 
    </label> 
</div> 
<div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Classic"> 
    <input type="checkbox" class="form-checkbox" value="Classic" name="submitted[click_the_looks_you_would_wear][Classic]" id="edit-submitted-click-the-looks-you-would-wear-2"> 
    <label for="edit-submitted-click-the-looks-you-would-wear-2" class="option"><span class="red">Label 2</span> 
    </label> 
</div> 
<div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Earthy"> 
    <input type="checkbox" class="form-checkbox" value="Earthy" name="submitted[click_the_looks_you_would_wear][Earthy]" id="edit-submitted-click-the-looks-you-would-wear-3"> 
    <label for="edit-submitted-click-the-looks-you-would-wear-3" class="option"><span class="red">Label 3</span> 
    </label> 
</div> 
<div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Fashionista"> 
    <input type="checkbox" class="form-checkbox" value="Fashionista" name="submitted[click_the_looks_you_would_wear][Fashionista]" id="edit-submitted-click-the-looks-you-would-wear-4"> 
    <label for="edit-submitted-click-the-looks-you-would-wear-4" class="option"><span class="red">Label 4</span> 
    </label> 
</div> 
<div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Feminine"> 
    <input type="checkbox" class="form-checkbox" value="Feminine" name="submitted[click_the_looks_you_would_wear][Feminine]" id="edit-submitted-click-the-looks-you-would-wear-5"> 
    <label for="edit-submitted-click-the-looks-you-would-wear-5" class="option"><span class="red">Label 5</span> 
    </label> 
</div> 
<div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Nautical"> 
    <input type="checkbox" class="form-checkbox" value="Nautical" name="submitted[click_the_looks_you_would_wear][Nautical]" id="edit-submitted-click-the-looks-you-would-wear-6"> 
    <label for="edit-submitted-click-the-looks-you-would-wear-6" class="option"><span class="red">Label 6</span> 
    </label> 
</div> 
<div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Sophisticated"> 
    <input type="checkbox" class="form-checkbox" value="Sophisticated" name="submitted[click_the_looks_you_would_wear][Sophisticated]" id="edit-submitted-click-the-looks-you-would-wear-7"> 
    <label for="edit-submitted-click-the-looks-you-would-wear-7" class="option"><span class="red">Label 7</span> 
    </label> 
</div> 
<div class="form-item form-type-checkbox form-item-submitted-click-the-looks-you-would-wear-Sporty"> 
    <input type="checkbox" class="form-checkbox" value="Sporty" name="submitted[click_the_looks_you_would_wear][Sporty]" id="edit-submitted-click-the-looks-you-would-wear-8"> 
    <label for="edit-submitted-click-the-looks-you-would-wear-8" class="option"><span class="red">Label 8</span> 
    </label> 
</div> 

(function ($) { 

$(document).ready(function ($) { 
    $(".form-checkboxes").find('input').click(function() { 
     if ($(this).is(":checked")) $(this).parent().parent().addClass('opaque') 
     else $(this).parent().parent().removeClass('opaque') 
    }); 
}); 

}(jQuery)); 

누군가를 살펴보고 제가이 작업을 수행 할 수있는 방법을 알려 수 있습니까? 그것은 드루팔 (Drupal 7) 웹 사이트를위한 것이므로, 바이올린의 HTML 부분을 많이 바꿀 수는 없습니다.

감사합니다.

Answer 1

변경 parent().parent()에서 next()으로 변경하십시오.

변경하려는 요소는 부모가 아닌 형제입니다.

http://jsfiddle.net/AftyD/4/

나는 레이블과 체크 박스 불투명도를 설정합니다 parent()을 사용하여 설명을주의하지 않았다. Mine은 레이블에 대해서만 불투명도를 설정합니다. 그래서 당신의 목표가 무엇이든간에 함께 가라.