选择具有以某个字符串开头的 ID 选择器的下拉列表

selecting the dropdowns having id selector starting with some string

本文关键字:开头 ID 选择器 下拉列表 字符串 选择      更新时间:2023-09-26

我有五个下拉列表,其中id元素名为box_g1,box_g2,box_g3,box_g4和box_g5。我想启用所有组合框中的所有禁用值,其中 id 选择器以 box_g 开头。

.HTML:

<select name="n1" id="box_g1">
    <option value="Default">Default</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
</select>
<select name="n2" id="box_g2" disabled="disabled">
    <option value="Disabled">Disabled</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
</select>
<select name="n3" id="box_g3" disabled="disabled">
    <option value="Disabled">Disabled</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
</select>
<select name="n4" id="box_g4" disabled="disabled">
    <option value="Disabled">Disabled</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
</select>
<select name="n5" id="box_g5" disabled="disabled">
    <option value="Disabled">Disabled</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
</select>

JQuery :

$(document).ready(function(){
    $("select").change(function(e){
        var id = $(this).attr("id");
        var value = this.value;
        $("select option").each(function(){
            var idParent = $(this).parent().attr("id");
            if(id != idParent){
                if(this.value == value){
                    this.disabled = true;
                }
                else if($("#box_g1 option:selected").val()!="Default"){
                    $("#box_g2").prop("disabled", false);
                    $("#box_g3").prop("disabled", false);
             $("#box_g4").prop("disabled", false);
                    $("#box_g5").prop("disabled", false);
                }else{
                    /*$("#box_g1").each(function(){
                        $("#box_g1 option").removeAttr("disabled",false);
                    });                     
                    $("#box_g2").prop("disabled",true).val('Disabled');
                    $("#box_g3").prop("disabled",true).val('Disabled');
                    $("#box_g4").prop("disabled",true).val('Disabled');
                    $("#box_g5").prop("disabled",true).val('Disabled');*/
                    defaultValues();
                }
            }
        });
    });
});
function defaultValues() {
        if ($("#box_g1").val() == "Default") {
            $("select[id^='box_g']").removeAttr("disabled",false); // added this line to enable all the values in all boxes but they are still disabled.
            $("#box_g2").attr("disabled", true).val('Disabled');
            $("#box_g3").attr("disabled", true).val('Disabled');
            $("#box_g4").attr("disabled", true).val('Disabled');
            $("#box_g5").attr("disabled", true).val('Disabled');
        } else {
            $("#box_g2").attr("disabled", false);
            $("#box_g3").attr("disabled", false);
            $("#box_g4").attr("disabled", false);
            $("#box_g5").attr("disabled", false);
        }
    }

任何人都可以帮忙吗?检查函数 defaultValues()。我已经提到了评论。

您可以使用以下功能启用所有选项:

$('select[id^="box_g"] option').prop("disabled",false);

但由于代码中的以下行,选择仍将被禁用

如果你想启用所有选择框,谁是 od 开始box_g"你可以使用它

 $("select[id^='box_g']").find("option").prop("disabled",false);