Question

我不知道为什么JS功能不起作用当我点击选项中的1时，Drop-down不起作用。

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

以下是代码段：

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

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

Answer 1

我认为onclick元素不支持option。您可以在onChange="optionChanged()"元素上添加select并在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 。

＆＃13;

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

＆＃13;

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

3 个答案: