Параметры выбора HTML не отключаются / включаются при нажатии кнопки, как это должно быть Javascript

Question

Я пытаюсь отключить опции для моего элемента select на моей HTML-странице, используя javascript DOM.

При нажатии кнопки функция должна отключить все опции в выборе, а другая кнопка должна включить их снова.

Проблема в том, что первый параметр никогда не отключается, а также при нажатии кнопки события не запускаются. Я не могу понять, в чем проблема, даже если я пытался часами.

Это мой выбор и кнопки:

<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

Вот что мне кажется рабочим фрагментом:

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

Поскольку это не меняет пользовательский интерфейс, я изменил включение и отключение параметров для комментариев.

Прокомментируйте, пожалуйста, чтобы объяснить, что не работает или что вы хотите изменить, если это необходимо.

Answer 2

у меня отлично работает:

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