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

Question

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

我正在使用的代码一旦选择就会禁用所有选择的选项，但我正在寻找一种方法来保持它为选择它的那个选项启用（即，如果我在第一个选择中选择“Dingo”选项，则第一个选择将启用 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");
});

Answer 2

以下代码应该可以工作：

$(document).ready(function() {
  $('#your-form-id').submit(function() {
    $(this).find('option:disabled').prop('disabled', false);
    return true;
  });
});

Working fiddle here.

Answer 3

在您的循环中，您可以添加一个条件：if(selectOption !== allGuards[i]) { // disable }，这将使触发处理程序的选择启用该选项。

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

    for (var i = 0; i < allGuards.length; i++)
    {
        if(allGuards[i] === selectOption) {
          continue;
        }
        var options = allGuards[i].getElementsByTagName("option");
        for (var o = 1; o < options.length; o++)
        {   
            if(options[o].value === selectOption.value) {
              options[o].disabled = true;
            }
        }
    }

    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);
    }
}

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