如何禁用 HTML 元素<option value="is set to false?">设置为假？</option>

Question

I have this form:我有这个表格：

 <form id="ConfigurazioneForm" method="post">
     <div class="form-group row">
                <div class="col-sm-1"></div>
                <label for="abilitato" class="col-sm-2 col-form-label">Abilita</label>
                <div class="col-sm-6">
                    <select class="form-control" id="abilitato" required>
                        <option value="true">true</option>
                        <option value="false">false</option>
                    </select>
                </div>
                <div class="col-sm-3"></div>
            </div>
            <div class="form-group row">
                <div class="col-sm-1"></div>
                <label for="mostranome" class="col-sm-2 col-form-label">Mostra il nome: </label>
                <div class="col-sm-6">
                    <select class="form-control" id="mostranome" required>
                        <option value="true">true</option>
                        <option value="false">false</option>
                    </select>
                </div>
                <div class="col-sm-3"></div>
            </div>
       </form>

How do I disable select "mostranome" whenever select "abilitato" is set to false?每当 select “abilitato” 设置为 false 时，如何禁用 select “mostranome”？ I tried in JQuery something like:我在 JQuery 试过类似的东西：

     $(document).ready(function (){
      if($("#abilitato").val()===false){
      $("#mostranome").prop('disabled',true);
      }
     })

But it doesn't get triggered, thank you for your time.但它不会被触发，谢谢你的时间。

Answer 1

$("#abilitato").val() gives string not boolean value 'true / false'. $("#abilitato").val()给字符串不是 boolean 值 'true / false'。 So why your compare fail.那么为什么你的比较失败了。

Compare with "" as a string and it's work.与""作为字符串进行比较，它是有效的。

 $(document).ready(function() { if ($("#abilitato").val() === "false") { $("#mostranome").prop('disabled', true); } $("#abilitato").change(function() { if ($("#abilitato").val() === "true") { $("#mostranome").prop('disabled', false); } else $("#mostranome").prop('disabled', true); }); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="ConfigurazioneForm" method="post"> <div class="form-group row"> <div class="col-sm-1"></div> <label for="abilitato" class="col-sm-2 col-form-label">Abilita</label> <div class="col-sm-6"> <select class="form-control" id="abilitato" required> <option value="false">false</option> <option value="true">true</option> </select> </div> <div class="col-sm-3"></div> </div> <div class="form-group row"> <div class="col-sm-1"></div> <label for="mostranome" class="col-sm-2 col-form-label">Mostra il nome: </label> <div class="col-sm-6"> <select class="form-control" id="mostranome" required> <option value="true">true</option> <option value="false">false</option> </select> </div> <div class="col-sm-3"></div> </div> </form>

Answer 2

Here is the way you can do it:这是您可以做到的方法：

 const abilitato = document.getElementById("abilitato"); const mostranome = document.getElementById("mostranome"); abilitato.addEventListener("change", (e) => { mostranome.disabled = e.target.value === "false"; });

 <.DOCTYPE html> <html> <head> <title>JS sandbox</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="src/styles:css" /> </head> <body> <div id="app"> <form id="ConfigurazioneForm" method="post"> <div class="form-group row"> <div class="col-sm-1"></div> <label for="abilitato" class="col-sm-2 col-form-label">Abilita</label> <div class="col-sm-6"> <select class="form-control" id="abilitato" required> <option value="true">true</option> <option value="false">false</option> </select> </div> <div class="col-sm-3"></div> </div> <div class="form-group row"> <div class="col-sm-1"></div> <label for="mostranome" class="col-sm-2 col-form-label" >Mostra il nome. </label> <div class="col-sm-6"> <select class="form-control" id="mostranome" required> <option value="true">true</option> <option value="false">false</option> </select> </div> <div class="col-sm-3"></div> </div> </form> </div> <script src="src/index.js"></script> </body> </html>

如何禁用 HTML 元素<option value="is set to false?">设置为假？</option>

问题描述

2 个解决方案

解决方案1
1 2020-11-11 09:16:24

解决方案2
1 2020-11-11 09:20:40

如何禁用 HTML 元素<option value="is set to false?">设置为假？</option>

问题描述

2 个解决方案

解决方案1 1 2020-11-11 09:16:24

解决方案2 1 2020-11-11 09:20:40

解决方案1
1 2020-11-11 09:16:24

解决方案2
1 2020-11-11 09:20:40