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

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

Vanilla 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

以下代码应该有效：

angular.module('ionicApp',[])

.controller('mainCtrl', function($scope) {

    $scope.operations = [];

    $scope.operation = [];

    $scope.operation = [{
                    title    : 'Operación 170794',
                    duration : '3600',
                    status   : '0'
                  }, {
                    title    : 'Operación 981922',
                    duration : '60',
                    status   : '0'
                  }];

});

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>

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

3 个答案:

Vanilla Javascipt

的jQuery