jQuery - отключить выбранные опции - PullRequest
Новая
       6

jQuery - отключить выбранные опции

51 голосов
/ 19 мая 2010

Необходимо отключить уже выбранные параметры в поле выбора с помощью jQuery. Я бы хотел, чтобы он был серым, как asmselect .

Проверьте мой пример здесь . 

//JS
$("#theSelect").change(function(){          
  var value = $("#theSelect option:selected").val();
  var theDiv = $(".is" + value);

  theDiv.slideDown().removeClass("hidden");
});


$("div a.remove").click(function () {     
  $(this).parent().slideUp(function() { $(this).addClass("hidden"); }); 
});

//HTML
<body>
<div class="selectContainer">
    <select id="theSelect">
        <option value="">- Select -</option>
        <option value="Patient">Patient</option>
        <option value="Physician">Physician</option>
        <option value="Nurse">Nurse</option>
    </select>
</div>
<div class="hidden isPatient">Patient <a href="#" class="remove" rel="Patient">remove</a></div>
<div class="hidden isPhysician">Physician <a href="#" class="remove" rel="Patient">remove</a></div>
<div class="hidden isNurse">Nurse <a href="#" class="remove" rel="Patient">remove</a></div>
</body>​

ОБНОВЛЕНО : Вот готовое решение . Спасибо Патрику и Симену.

Ответы [ 4 ]

105 голосов
/ 19 мая 2010

Добавьте эту строку в ваш change обработчик событий 

    $("#theSelect option:selected").attr('disabled','disabled')
        .siblings().removeAttr('disabled');

Это отключит выбранный параметр и включит все ранее отключенные параметры.

EDIT:

Если вы не хотите включать предыдущие, просто удалите эту часть строки: 

        .siblings().removeAttr('disabled');

EDIT:

http://jsfiddle.net/pd5Nk/1/

Чтобы повторно включить, когда вы нажимаете удалить, добавьте это в ваш обработчик кликов. 

$("#theSelect option[value=" + value + "]").removeAttr('disabled');
6 голосов
/ 19 мая 2010

Это отключит / включит параметры при их выборе / удалении соответственно. 

$("#theSelect").change(function(){          
    var value = $(this).val();
    if (value === '') return;
    var theDiv = $(".is" + value);

    var option = $("option[value='" + value + "']", this);
    option.attr("disabled","disabled");

    theDiv.slideDown().removeClass("hidden");
    theDiv.find('a').data("option",option);
});


$("div a.remove").click(function () {     
    $(this).parent().slideUp(function() { $(this).addClass("hidden"); });
    $(this).data("option").removeAttr('disabled');
});

Демо: http://jsfiddle.net/AaXkd/

4 голосов
/ 19 мая 2010

Это похоже на работу: 

$("#theSelect").change(function(){          
    var value = $("#theSelect option:selected").val();
    var theDiv = $(".is" + value);

    theDiv.slideDown().removeClass("hidden");
    //Add this...
    $("#theSelect option:selected").attr('disabled', 'disabled');
});


$("div a.remove").click(function () {     
    $(this).parent().slideUp(function() { $(this).addClass("hidden"); });
    //...and this.
    $("#theSelect option:disabled").removeAttr('disabled');
});
3 голосов
/ 06 декабря 2016

Пожалуйста, попробуйте это, 

$('#select_id option[value="'+value+'"]').attr("disabled", true);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...