Не вешается disable на option в классе

Question

Стоит задача поставить disable в тег option если значения продукта меняется.

jQuery('.services_products').on('change','.product',function(value){

    if ( $(this).val() == 1 ) {
        console.log('Скрываем не нужные блоки к продукту');
        $(".js_table").css("display", "block");
        $(".js_computer").css("display", "block");
    }

    if ( $(this).val() == 2 ) {
        console.log('К примеру Рыба');
        $(".js_table").css("display", "none");
        $(".js_computer").css("display", "none");
        $(".js_country").css("display", "block");

        $(".js_country option[value='6']")
            .attr("disabled", "disabled")
            .siblings().removeAttr("disabled");

        $("option[value='7']")
            .attr("disabled", "disabled")
            .siblings().removeAttr("disabled");
    }

});

Почему не работает .js_country option[value='6']? В то время как $("option[value='7']") работает, а значит и jQ тоже.

<div class="row js_country">
<label for="country">Страна происхождения</label>
<select class="service_custom_select" id="country" name="fuel" aria-invalid="false">
<option name="country_id" value="1">Страна</option>
<option name="country_id" value="2">Страна</option>
<option name="country_id" value="3">Страна</option>
<option name="country_id" value="4">Страна</option>
<option name="country_id" value="5">Страна</option>
<option name="country_id" value="6">Страна не отключена</option>
<option name="country_id" value="7">Страна отключена </option>
<option name="country_id" value="8">Страна</option>
</select>
</div>

Answer 1

Селектор работает:

$(".js_country option").removeAttr("disabled");

$(".js_country option[value='6']").text("AUSTRALIA").attr("disabled", "disabled");

$("option[value='7']").attr("disabled", "disabled");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row js_country">
  <label for="country">Страна происхождения</label>
  <select class="service_custom_select" id="country" name="fuel" aria-invalid="false">
    <option name="country_id" value="1" disabled>Страна 1</option>
    <option name="country_id" value="2">Страна 2</option>
    <option name="country_id" value="3">Страна 3</option>
    <option name="country_id" value="4">Страна 4</option>
    <option name="country_id" value="5">Страна 5</option>
    <option name="country_id" value="6">Страна не отключена</option>
    <option name="country_id" value="7">Страна отключена </option>
    <option name="country_id" value="8">Страна 8</option>
  </select>
</div>

Answer 2

Можно же тоже самое на нормальном языке: ))

document.querySelectorAll('.js_country option').forEach(opt => opt.disabled = false);

document.querySelector(".js_country option[value='6']").disabled = true;

document.querySelector("option[value='7']").disabled = true;

<div class="row js_country">
  <label for="country">Страна происхождения</label>
  <select class="service_custom_select" id="country" name="fuel" aria-invalid="false">
    <option name="country_id" value="1" disabled>Страна 1</option>
    <option name="country_id" value="2">Страна 2</option>
    <option name="country_id" value="3">Страна 3</option>
    <option name="country_id" value="4">Страна 4</option>
    <option name="country_id" value="5">Страна 5</option>
    <option name="country_id" value="6">Страна не отключена</option>
    <option name="country_id" value="7">Страна отключена </option>
    <option name="country_id" value="8">Страна 8</option>
  </select>
</div>

БЛОГ НА HUSL

Не вешается disable на option в классе

Ответы (2 шт):