javascript - 防止选项在当前选择器中被禁用

Question

尝试提交表单时，guard[] 字段未提交，因为选择字段中的选项在提交时被禁用。

我正在使用的代码一旦选择，就会在所有选择中禁用该选项，但我正在寻找一种方法来使其选中的选项保持启用状态(即，如果我在第一个选择中选择“Dingo” Guard[] 名称中的选项，则第一个选择将启用 Dingo，而第二个和第三个选择将禁用它。)下面附有代码。

我要么寻找一种从 TagName 获取元素 ID 的方法(如我的代码注释中所示)，要么寻找一种在提交表单之前重新启用禁用选项的方法。

JS/JQ:

function disableGuards(selectOption)
{
    var selectedGuards = [];
    var allGuards = document.getElementsByName("guard[]");
    var editedSelect = selectOption.id;

    for (var i = 0; i < allGuards.length; i++)
    {
        selectedGuards.push(allGuards[i].value); 
    }

    for (var i = 0; i < allGuards.length; i++)
    {
        var options = allGuards[i].getElementsByTagName("option");
        for (var o = 1; o < options.length; o++)
        {
            var val = options[o].value;
            var chosen = selectedGuards.indexOf(val);
            var myvalue = allGuards[i].value;

            options[o].disabled = (chosen != -1 && val != (myvalue && "NONE") /*&& editedSelect != a way to get the elementId from TagName*/);
        }
    }

    if (document.getElementById("guard1").value == "RAND")
    {
        document.getElementById("guard2").disabled = true;
        document.getElementById("guard3").disabled = true;
    }
    else
    {
        document.getElementById("guard2").disabled = false;
        document.getElementById("guard3").disabled = ((document.getElementById("guard2").value == "NONE") ? true : false);
    }
}

HTML:

<select name='guard[]' style='width:100%' id='guard1' onChange='disableGuards(this)'>
<option selected disabled>1st Choice...</option>
<option value='RAND'>No Preferences, Please Assign an Instructor</option>
<option value='Dingo'>Dingo</option>
<option value='Mike'>Mike</option>
<option value='Stephanie'>Stephanie</option>
<option value='Zach'>Zach</option>
</select>
<br>
<select name='guard[]' style='width:100%' id='guard2' onChange='disableGuards(this)'>
<option selected disabled>2nd Choice...</option>
<option value='NONE'>No 2nd Preference</option>
<option value='Dingo'>Dingo</option>
<option value='Mike'>Mike</option>
<option value='Stephanie'>Stephanie</option>
<option value='Zach'>Zach</option>
</select>
<br>
<select name='guard[]' style='width:100%' id='guard3' onChange='disableGuards(this)'>
<option selected disabled>3rd Choice...</option>
<option value='NONE'>No 3rd Preference</option>
<option value='Dingo'>Dingo</option>
<option value='Mike'>Mike</option>
<option value='Stephanie'>Stephanie</option>
<option value='Zach'>Zach</option>
</select>

Answer 1

查找所有选中的选项，然后删除禁用的关键字

普通 Javascipt

document.getElementById("#testform").addEventListener("submit",function (e) {
    var options = e.querySelector("option:checked"), option, i;
    for(i = 0; option = options[i]; i++) {
        option.removeAttribute("disabled");
    }
}, false);

jQuery

$("#testform").submit(function () {
    $('option:selected', this).removeProp("disabled");
});