programing

jQuery - 선택한 옵션 사용 안 함

javajsp 2023. 10. 6. 20:54

jQuery - 선택한 옵션 사용 안 함

jQuery를 사용하여 선택 상자에서 이미 선택한 옵션을 비활성화해야 합니다.sm select처럼 회색으로 하고 싶습니다.

여기서 제 예를 시험해 보세요.

//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>​

업데이트됨:이것이 완성된 해결책입니다.패트릭과 시멘 덕분입니다.

이 줄을 당신의 줄에 추가합니다.change이벤트 처리기

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

그러면 선택한 옵션이 비활성화되고 이전에 비활성화된 옵션이 활성화됩니다.

편집:

이전 것을 다시 활성화하지 않으려면 줄의 다음 부분을 제거하기만 하면 됩니다.

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

편집:

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

제거를 클릭할 때 다시 활성화하려면 이를 클릭 처리기에 추가합니다.

$("#theSelect option[value=" + value + "]").removeAttr('disabled');

제발 이것을 시도해보세요.

$('#select_id option[value="'+value+'"]').attr("disabled", true);

이렇게 하면 옵션을 각각 선택/제거할 때 옵션이 비활성화/활성화됩니다.

$("#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/

작동하는 것 같습니다.

$("#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');
});

언급URL : https://stackoverflow.com/questions/2867362/jquery-disable-selected-options