Disabled option

Question

Подскажите пожалуйста, как сделать возможность запрета выбора одинаковых значений в select средством disabled? В данный момент не могу убрать disabled у option которые были выбраны ранее но были изменены.

$("select").on("change", function() {
  $("select").each(function() {
    $("select option[value='" + $(this).val() + "']").attr("disabled", true);
  });
});

select {
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option>change</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<select>
  <option>change</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<select>
  <option>change</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

Answer 1

При клике на один из option убираем disable со всех подобных, чтобы можно было выбрать его снова.
При выборе значения - пробегаемся по всем выбранным option и ставим disabled для всех option, где встречается такое значение

let selectIsOpen = false;
let oldSelectValue = '';

$("select").on("click", function() {
    let choosedValue = $(this).find('option:selected').val();    
    if (selectIsOpen) {            
        if (oldSelectValue === choosedValue)
            $(`option[value=${choosedValue}]`).prop('disabled', true);
        
        selectIsOpen = false;
        return;
    }
      
    $(`option[value=${choosedValue}]`).prop('disabled', false);
    oldSelectValue = choosedValue;
    
    selectIsOpen = true;
});

$("select").on("change", function() {
    let choosedValue = $(this).find('option:selected').val();
    
    $("select option:selected").each(function() {
        $("option[value='" + $(this).val() + "']").prop('disabled', true);
    });
});

select {
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option>change</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<select>
  <option>change</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<select>
  <option>change</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

Менее глючный вариант (если селект закрывается не кликом, а ещё и при клике вне области селекта)

let selectIsOpen = false;
let oldSelectValue = '';

const disableOptionsOnClose = (selectedOption) => {
    $("select option:selected").each(function() {
        $("option[value='" + $(selectedOption).val() + "']").prop('disabled', true);
    });
    
    resetFlagsAndData();
}

const resetFlagsAndData = () => {
    selectIsOpen = false;
    oldSelectValue = '';
}

$("select").on("click", function() {
    let choosedValue = $(this).find('option:selected').val();    
    
    if (selectIsOpen) {     
        disableOptionsOnClose($(this));
        return;
    }
  
    $(`option[value=${choosedValue}]`).prop('disabled', false);    
    oldSelectValue = choosedValue;    
    selectIsOpen = true;
});

$("select").on("blur", function() {
    disableOptionsOnClose($(this));
});

select {
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option>change</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<select>
  <option>change</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<select>
  <option>change</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

БЛОГ НА HUSL

Disabled option

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