如何使用下拉选项在输入框元素上添加/删除禁用属性

Question

我不知道为什么当我点击选项之一时 JS 功能不起作用或下拉菜单不起作用。

但是当我点击它时按钮在工作。

代码片段如下：

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

还有 select 选项与简单按钮的不同之处。为什么按钮工作正常，除了 select 选项？

Answer 1

我认为 onclick 不支持 option 元素。您可以在 select 元素上添加 onChange="optionChanged()" 并在您的 JS 中创建一个新函数。沿线的东西

     function optionChanged() {
    document.getElementById("x").disabled = !document.getElementById("x").disabled;
}

Answer 2

像这样的东西会起作用：

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

Answer 3

我已经回答了我自己的问题。这是工作代码。

我使用 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>

如何使用下拉选项在输入框元素上添加/删除禁用属性

How To Add / Remove Disable Attribute On Input Box Element Using Drop-down Option

html

dom

jscript