как отключить вкл выкл 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>

→ Ссылка