Привет всем. Есть блок div class="order". Внутри него 2 дива. Первый - на виду, второй - скрыт. Внутри первого есть чекбокс при клике по которому открывается второй див.
Таких блоков div class="order" может быть любое количество и их структура меняться не должна.
Вопрос в том, что сейчас при клике по чекбоксу открываются спрятанные дивы у
всех блоков, а должен открываться только див того блока, по чекбоксу которого был клик. Вот в том и вопрос как это сделать )
html:
<div class="order">
<div class="order__main">
<label for="plate-1">
<input type="checkbox" name="plate-1" id="plate-1" value="imperial">
Fried Imperial rolls (2)
</label>
<span price="3">
<input type="text" class="js-text" name="imperial.quanity" id="" disabled="disabled" value="1">
$<span></span>
</span>
</div><!--./order__main-->
<div class="order__additional js-state">
<label for="plate-add-1">
<input type="radio" name="imperial.option" id="plate-add-1">
Pork
</label>
<label for="plate-add-2">
<input type="radio" name="imperial.option" id="plate-add-2">
Vegetarian
</label>
</div><!--./order__additional-->
</div><!--./order-->
jQuery:
$('.js-state').hide();
$('input:checkbox').on('click', function() {
var checked = this.checked;
$('.js-state').css('display', checked ? 'block': 'none'); // show if checked
$('.js-text').attr('disabled', !checked).css('color', checked ? 'black' : '#f0f0f0').val(1)
.change()
.each(function() {
if (checked) this.focus();
});
$('.js-text').change(function() {
$('~span:first', this).text(
$(this).val() *
$(this).parents("span[price]:first").attr('price'));
});
});
В скрипте прописана и другая функциональность, но надеюсь вас это не смутит)
