Как добавить / удалить атрибут отключения в элементе поля ввода с помощью раскрывающегося списка

Я не знаю, почему JS-функция не работает. Выпадающий список не работает, когда я нажимаю 1 из опций.

Но на кнопке, когда я нажимаю, она работает.

Here's the code snippet: 

<div class="btn-group">
      <button onclick="myFunction()" class="btn btn-success">Disable</button>
      <button onclick="myFunction1()" class="btn btn-success">Unlock</button>
     </div>
     <select class="">
       <option onclick="myFunction()">Disable</option>
       <option onclick="myFunction1()">Unlock</option>
     </select>
     <input type="text" name="x" id="x">



    <script type="text/javascript">
    function myFunction() {
        document.getElementById("x").disabled = true;
    }function myFunction1() {
        document.getElementById("x").disabled = false;
    }
    </script>
And also what's the different of select option to simple button. Why the button is working fine, except on select option ?


html dom jscript
person スペースタイム    schedule 23.04.2018    source источник
comment
Попробуйте выбрать при изменении. Вы не можете использовать onclick для опциональных элементов (хотя иногда это работает)   -  person A. Meshu    schedule 23.04.2018
comment
Возможный дубликат Событие onclick не работает для параметров   -  person A. Meshu    schedule 23.04.2018

Ответы (3)


arrow_upward
2
arrow_downward

Я не думаю, что onclick не поддерживается для option элементов. Вы можете добавить onChange="optionChanged()" к элементу select и создать новую функцию в своем JS. Что-то по линиям

     function optionChanged() {
    document.getElementById("x").disabled = !document.getElementById("x").disabled;
}
person msokrates    schedule 23.04.2018

arrow_upward
2
arrow_downward

Что-то вроде этого будет работать:

<div class="btn-group">
      <button onclick="myFunction()" class="btn btn-success">Disable</button>
      <button onclick="myFunction1()" class="btn btn-success">Unlock</button>
     </div>
     <select class="" onchange="selectOnChange(this)">
       <option value="disable">Disable</option>
       <option value="unlock">Unlock</option>
     </select>
     <input type="text" name="x" id="x">



    <script type="text/javascript">
    function myFunction() {
        document.getElementById("x").disabled = true;
    }function myFunction1() {
        document.getElementById("x").disabled = false;
    }function selectOnChange(e) {
            if (e.value == "disable")
              document.getElementById("x").disabled = true;
            else
              document.getElementById("x").disabled = false;
    }
    </script>

person slee423    schedule 23.04.2018

arrow_upward
1
arrow_downward

Я уже отвечаю на свой вопрос. вот рабочий код.

я использовал onchange вместо onclick.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect" onchange="myFunction()">
  <option value="disable">disable
  <option value="unlock">unlock
</select>

<button id="show">modal</button>

<p id="demo"></p>
 <input type="text" name="x" id="x">
<script>
  $(function() {
    
    document.getElementById("x").disabled = true;
  });
function myFunction() {

    $('#show').show();
    var x = document.getElementById("mySelect").value;
    if(x == 'unlock'){
     document.getElementById("demo").innerHTML = "You selected: " + x;
     $('#show').hide();
     document.getElementById("x").disabled = false;
    }
    if(x == 'disable'){
     document.getElementById("demo").innerHTML = "You selected: " + x;
      document.getElementById("x").disabled = true;
    }
   
    
}
</script>

person スペースタイム    schedule 23.04.2018