私は一連の8つのチェックボックスを持っています。各チェックボックスには独自のラベルがあり、ラベルには単一の背景色があります。選択されているチェックボックスの不透明度を変更する新しいクラスを追加し、ユーザーがチェックボックスの選択を解除した場合に不透明度を元の不透明度に戻す必要があります。チェックボックスが選択されたときに親要素にクラスを追加するフィドルを設定しましたが、それはまさに必要なものではありません。個々のチェックボックス 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 Web サイト用なので、フィドルの HTML 部分をあまり変更できません。
ありがとう!