禁用提交按钮，直到选择不带 jquery 的下拉选项答案

【问题标题】：disable submit button until selecting a dropdown option without jquery禁用提交按钮，直到选择不带 jquery 的下拉选项
【发布时间】：2021-05-27 10:06:03
【问题描述】：

我有一个下拉选择框，其中“选择一个”作为默认选项和查看报告提交按钮

<select name="time" id="time" required>
 <option value="0" selected>Select one</option>
 <option value="1">Value 1</option>
 <option value="2">Value 2</option>
</select>
<input type="submit" name="act" value="View Report" disabled>

在选择值 1 或 2 之前，提交按钮处于禁用状态。我怎么能不使用 jquery 做到这一点？谢谢。

【问题讨论】：

你能解释一下你尝试了什么吗？
@Fusei 我尝试了 if else 语句 if (time.options.value != "0") then document.getElementbyID("btn").disabled = true。我正在为提交按钮设置 id="btn"
我也尝试过 if (time.options.length == 0) 使用相同的语句，但意识到“选择一个”已经是一个选择选项：P
对不起。然后你应该使用 addEventListner。无论如何，我的代码工作正常。感谢您的合作！

标签： javascript html

【解决方案1】：

如您所见，我将addEventListener 添加到select，因此当更改时脚本将检查value 是否与0 不同

const select = document.getElementById('time');
const submitButton = document.getElementById('submit');
document.getElementById('time').addEventListener('change', () => {
  if (select.value === '0') {
    submitButton.disabled = true;
  } else {
    submitButton.disabled = false;
  }
});

<select name="time" id="time" required>
  <option value="0" selected>Select one</option>
  <option value="1">Value 1</option>
  <option value="2">Value 2</option>
</select>
<input type="submit" name="act" id='submit' value="View Report" disabled>

【讨论】：

非常感谢！！！请问为什么是“===”而不是“==”？
看看here :)

【解决方案2】：

您可以使用 .prop() 方法。祝你好运！

<html>
  <head>
    <title>
    Bottom Nav Bar
    </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <body>
    <select name="time" id="time" required>
     <option value="0" selected>Select one</option>
     <option value="1" >Value 1</option>
     <option value="2">Value 2</option>
    </select>
    <input type="submit" name="act" value="View Report" disabled>
    </body>
     <script>
    $("#time").click(function() {
             if($("select").val() == 0)
           $("input").prop( "disabled", true);
            else $("input").prop( "disabled", false);
        });
    </script>
    </html>

【讨论】：

You might not need jQuery :)
谢谢！！我们的老师要求我们不要在这个练习中使用 jquery。但我很快就会开始真正学习它;D