Question

我正在尝试使用javascript DOM在我的HTML页面中禁用我的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

以下是我认为的工作片段：

＆＃13;

// 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;*/

}

＆＃13;

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

＆＃13;

由于它没有改变用户体验，我已将选项的启用和禁用更改为评论。

如有必要，请发表评论以解释哪些不起作用或您想要修改哪些内容。

按钮点击时不会禁用/启用HTML选项，因为它们应该是Javascript

2 个答案: