我有一系列 8 个复选框。每个复选框都有自己的标签，标签有单一的背景颜色。我需要添加一个新类，该类将更改任何选中的复选框的不透明度，然后如果用户取消选择复选框，则将不透明度更改回原始不透明度。I have set up a fiddle where I add a class to the parent element when a checkbox is selected, but it's not exactly what I need. 您将看到它将类添加到顶级 div 而不是单个复选框 div 容器。
.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 部分进行太多更改。
谢谢！