HTML select 选项在单击按钮时未 disabled/enabled，因为它们应该 Javascript

Question

我正在尝试使用 javascript DOM.

在我的 HTML 页面中禁用我的 select 元素上的选项

单击按钮时，一个函数应禁用 select 中的每个选项，而另一个按钮应再次启用它们。

问题是第一个选项永远不会被禁用，而且在单击按钮时也不会触发事件。即使我尝试了几个小时，我也无法弄清楚问题是什么。

这是我的 select 和按钮：

<select name="tempoTest" 
                          id="tempoTest1" 
                          class="input-dimension select2 tempoTest" 
                          required="true" 
                          style="padding:0.8%;">
                <option value="days">Giorni</option>
                <option value="hours">Ore</option>
                <option value="minutes">Minuti</option>
            </select>

<button type="button" class="btn-default btn-edit" name="edit1" id="edit1" onclick="editInput()">Edit </button> 
<button type="button" class="btn-default btn-edit" name="annulla1" id="annulla1" onclick="annullaEdit()" style="margin-left:6%">Annulla </button>

这是加载页面时应该发生的情况（默认）：

var time = "minutes";

var $j = jQuery.noConflict(); //per evitare conflitti con altre librerie
$j("#tempoTest1").val(time).trigger('change');
document.getElementById("tempoTest1").options[0].disabled = true;
document.getElementById("tempoTest1").options[1].disabled = true;
document.getElementById("tempoTest1").options[2].disabled = true;

document.getElementById("tempoTest1").disabled = true;

这些是禁用和启用的功能（"editInput()" 应该启用每个选项，"annullaEdit" 应该禁用它们）

function editInput(){
    var tempo = "hours" //value from DB




    $j("#tempoTest1").val(tempo).trigger('change');
  document.getElementById("tempoTest1").disabled = false;   
    document.getElementById("tempoTest1").options[0].disabled = false;
    document.getElementById("tempoTest1").options[1].disabled = false;
    document.getElementById("tempoTest1").options[2].disabled = false;

}

function annullaEdit(){
    var tempo = <?php echo json_encode($time)?>;

    $j("#tempoTest1").val(tempo).trigger('change');             
    document.getElementById("tempoTest1").disabled = true;

    document.getElementById("tempoTest1").options[0].disabled = true;
    document.getElementById("tempoTest1").options[1].disabled = true;
    document.getElementById("tempoTest1").options[2].disabled = true;

}

是否存在功能无法正常工作且第一个选项从未被禁用的原因？

提前致谢。

Answer 1

适合我：

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script>
            function editInput() {
                //var tempo = "hours" //value from DB
                //$j("#tempoTest1").val(tempo).trigger('change');
                document.getElementById("tempoTest1").disabled = false;
                document.getElementById("tempoTest1").options[0].disabled = false;
                document.getElementById("tempoTest1").options[1].disabled = false;
                document.getElementById("tempoTest1").options[2].disabled = false;
            }

            function annullaEdit() {
                //var tempo = <?php echo json_encode($time)?>;
                //$j("#tempoTest1").val(tempo).trigger('change');
                document.getElementById("tempoTest1").disabled = true;
                document.getElementById("tempoTest1").options[0].disabled = true;
                document.getElementById("tempoTest1").options[1].disabled = true;
                document.getElementById("tempoTest1").options[2].disabled = true;
            }
        </script>
    </head>
    <body>
        <select name="tempoTest"
                id="tempoTest1"
                class="input-dimension select2 tempoTest"
                required="true"
                style="padding:0.8%;">
            <option value="days">Giorni</option>
            <option value="hours">Ore</option>
            <option value="minutes">Minuti</option>
        </select>

        <button type="button" class="btn-default btn-edit" name="edit1" id="edit1" onclick="editInput()">Edit </button>
        <button type="button" class="btn-default btn-edit" name="annulla1" id="annulla1" onclick="annullaEdit()" style="margin-left:6%">Annulla </button>
    </body>
    </html>

Answer 2

这是我认为有效的片段：

// This is what should happen when the page is loaded (default):
var time = "minutes";

var $j = jQuery.noConflict(); //per evitare conflitti con altre librerie
$j("#tempoTest1").val(time).trigger('change');
/*document.getElementById("tempoTest1").options[0].disabled = true;
document.getElementById("tempoTest1").options[1].disabled = true;
document.getElementById("tempoTest1").options[2].disabled = true;*/
document.getElementById("tempoTest1").disabled = true;


// These are the functions to disable and enable ("editInput()" should enable every option and "annullaEdit" should disable them)
function editInput() {
  var tempo = "hours" //value from DB

  $j("#tempoTest1").val(tempo).trigger('change');
  document.getElementById("tempoTest1").disabled = false;
  /*document.getElementById("tempoTest1").options[0].disabled = false;
  document.getElementById("tempoTest1").options[1].disabled = false;
  document.getElementById("tempoTest1").options[2].disabled = false;*/
}

function annullaEdit() {
  var tempo = "hours";

  $j("#tempoTest1").val(tempo).trigger('change');
  document.getElementById("tempoTest1").disabled = true;
  /*document.getElementById("tempoTest1").options[0].disabled = true;
  document.getElementById("tempoTest1").options[1].disabled = true;
  document.getElementById("tempoTest1").options[2].disabled = true;*/

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="tempoTest" id="tempoTest1" class="input-dimension select2 tempoTest" required="true" style="padding:0.8%;">
  <option value="days">Giorni</option>
  <option value="hours">Ore</option>
  <option value="minutes">Minuti</option>
</select>

<button type="button" class="btn-default btn-edit" name="edit1" id="edit1" onclick="editInput()">Edit </button>
<button type="button" class="btn-default btn-edit" name="annulla1" id="annulla1" onclick="annullaEdit()" style="margin-left:6%">Annulla </button>

因为它不会改变用户体验，所以我更改了注释选项的启用和禁用。

如有必要，请发表评论以解释什么不起作用或您想修改什么。

HTML select 选项在单击按钮时未 disabled/enabled，因为它们应该 Javascript

HTML select options are not disabled/enabled on button click as they should Javascript

javascript

dom

html-select