как отключить вкл выкл select при нажатии на нужный radio?
$(document).ready(function() {
$('#variant-select1').on('change', function() {
var url1 = $(this).find(':selected').data('price');
$('#photo-big1').attr('src', url1);
});
$('#variant-select2').on('change', function() {
var url2 = $(this).find(':selected').data('price');
$('#photo-big2').attr('src', url2);
});
$('#variant-select3').on('change', function() {
var url3 = $(this).find(':selected').data('price');
$('#photo-big3').attr('src', url3);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calc-section__fittings">
<h3 class="title-calc">Фурнитура и ее цвет:</h3>
<div class="calc-section__fittings-wrapper">
<div class="dooropen__item">
<input type="radio" checked name="doorFeeting" id="doorFeeting1">
<label for="doorFeeting1">
<span>Hope Victoria</span>
<select class="img__select" name="variant_id1" id="variant-select1">
<option value="2000" data-price="assets/images/furnitura/hopevictoriya/hope-1.jpg">Хром матовый</option>
<option value="2010" data-price="assets/images/furnitura/hopevictoriya/hope-2.jpg">Золото</option>
<option value="2000" data-price="assets/images/furnitura/hopevictoriya/hope-3.jpg">Хром глянец</option>
</select>
<img id="photo-big1" src="assets/images/furnitura/hopevictoriya/hope-1.jpg" alt="img">
</label>
</div>
<div class="dooropen__item">
<input type="radio" name="doorFeeting" id="doorFeeting2">
<label for="doorFeeting2">
<span>Armadillo squid</span>
<select class="img__select" name="variant_id2" id="variant-select2">
<option value="2000" data-price="assets/images/furnitura/armadillo/arma-1.jpg">Черный матовый</option>
<option value="2010" data-price="assets/images/furnitura/armadillo/arma-2.jpg">Хром матовый</option>
<option value="2000" data-price="assets/images/furnitura/armadillo/arma-3.jpg">Хром глянец</option>
</select>
<img id="photo-big2" src="assets/images/furnitura/armadillo/arma-1.jpg" alt="img">
</label>
</div>
<div class="dooropen__item">
<input type="radio" name="doorFeeting" id="doorFeeting3">
<label for="doorFeeting3">
<span>Almar Pyramide</span>
<select class="img__select" name="variant_id3" id="variant-select3">
<option value="2000" data-price="assets/images/furnitura/almar/almar-1.jpg">Бронза</option>
<option value="2010" data-price="assets/images/furnitura/almar/almar-2.jpg">Хром матовый</option>
<option value="2000" data-price="assets/images/furnitura/almar/almar-3.jpg">Черный матовый</option>
</select>
<img id="photo-big3" src="assets/images/furnitura/almar/almar-1.jpg" alt="img">
</label>
</div>
</div>
</div>
как отключить селект в контейнерах где radio не checked
Ответы (1 шт):
Автор решения: Алексей Шиманский
→ Ссылка
$(document).ready(function() {
$('[type="radio"]')[0].click();
});
$('[type="radio"]').on('click', function() {
$('select').attr('disabled', 'disabled');
$(this).closest('.dooropen__item').find('select').removeAttr('disabled');
});
//-----------------------------------------------------//
$('#variant-select1').on('change', function() {
var url1 = $(this).find(':selected').data('price');
$('#photo-big1').attr('src', url1);
});
$('#variant-select2').on('change', function() {
var url2 = $(this).find(':selected').data('price');
$('#photo-big2').attr('src', url2);
});
$('#variant-select3').on('change', function() {
var url3 = $(this).find(':selected').data('price');
$('#photo-big3').attr('src', url3);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="calc-section__fittings">
<h3 class="title-calc">Фурнитура и ее цвет:</h3>
<div class="calc-section__fittings-wrapper">
<div class="dooropen__item">
<input type="radio" checked name="doorFeeting" id="doorFeeting1">
<label for="doorFeeting1">
<span>Hope Victoria</span>
<select class="img__select" name="variant_id1" id="variant-select1">
<option value="2000" data-price="assets/images/furnitura/hopevictoriya/hope-1.jpg">Хром матовый</option>
<option value="2010" data-price="assets/images/furnitura/hopevictoriya/hope-2.jpg">Золото</option>
<option value="2000" data-price="assets/images/furnitura/hopevictoriya/hope-3.jpg">Хром глянец</option>
</select>
<img id="photo-big1" src="assets/images/furnitura/hopevictoriya/hope-1.jpg" alt="img">
</label>
</div>
<div class="dooropen__item">
<input type="radio" name="doorFeeting" id="doorFeeting2">
<label for="doorFeeting2">
<span>Armadillo squid</span>
<select class="img__select" name="variant_id2" id="variant-select2">
<option value="2000" data-price="assets/images/furnitura/armadillo/arma-1.jpg">Черный матовый</option>
<option value="2010" data-price="assets/images/furnitura/armadillo/arma-2.jpg">Хром матовый</option>
<option value="2000" data-price="assets/images/furnitura/armadillo/arma-3.jpg">Хром глянец</option>
</select>
<img id="photo-big2" src="assets/images/furnitura/armadillo/arma-1.jpg" alt="img">
</label>
</div>
<div class="dooropen__item">
<input type="radio" name="doorFeeting" id="doorFeeting3">
<label for="doorFeeting3">
<span>Almar Pyramide</span>
<select class="img__select" name="variant_id3" id="variant-select3">
<option value="2000" data-price="assets/images/furnitura/almar/almar-1.jpg">Бронза</option>
<option value="2010" data-price="assets/images/furnitura/almar/almar-2.jpg">Хром матовый</option>
<option value="2000" data-price="assets/images/furnitura/almar/almar-3.jpg">Черный матовый</option>
</select>
<img id="photo-big3" src="assets/images/furnitura/almar/almar-1.jpg" alt="img">
</label>
</div>
</div>
</div>