从下拉列表中未选择任何选项时禁用按钮答案

【问题标题】：Disable button when no option is selected from dropdown从下拉列表中未选择任何选项时禁用按钮
【发布时间】：2018-06-18 12:25:22
【问题描述】：

我有一个输入类型按钮（它不能是提交类型，因为它会触发表单内的辅助操作）如果没有在前一个下拉选择器上进行选择，我需要保持禁用状态。我没有成功尝试过：this、this、this 和其他一些...

这是我的表单代码：

echo "<select class='corpusname' id='corpusname' size='1' name='corpusname' required />
<option value=''>Select a corpus</option>";

// This query gives the other options from a database
$result = mysqli_query($db, "SELECT * FROM corpus_info") or die(mysqli_error($db));
while($cpsmlg = mysqli_fetch_array($result)){
echo "<option value='".$cpsmlg['corpus']."'>".$cpsmlg['title']."</option>";
}
echo "</select>
<a id='theLink' target='_blank'>

// This is the button to be disabled
<input type='button' id='seedoc' class='seedoc' value='See doc' /></a>";

【问题讨论】：

你需要js的帮助才能完成你想要的。
是的，我试过的都是js，你可以查看我添加的链接
if no selection made on a previous dropdown selector. that-one 在哪里（上一个下拉选择器）？
以<select class='corpusname' id='corpusname'..开头的那个
是的，一个下拉菜单和一个按钮，如果下拉菜单上没有选择，按钮禁用

标签： javascript php jquery html

【解决方案1】：

只需将onchange 事件添加到select。

function enableButton()
{
    var selectelem = document.getElementById('corpusname');
    var btnelem = document.getElementById('seedoc');
    btnelem.disabled = !selectelem.value;
}

<select class='corpusname' id='corpusname' size='1' name='corpusname' required onchange="enableButton()"/>
<option value=''>Select a corpus</option>
<option value="1">1</option>
</select>
<input type="button" id="seedoc" disabled value="Submit">

【讨论】：

这样，当他变回空按钮时，按钮将保持启用状态
谢谢，我现在可以意识到我遇到的问题是关于引号的，因为我在 php 下我必须这样写才能工作：onchange=\"document.getElementById('seedoc').disabled=false;\"
没有。但在选择某些项目之前，btn 已启用。那么如果你选择Select a corpus，它仍然会被启用。

【解决方案2】：

这里有一点sn-p，没有php部分，php部分还是一样。

function ValidateDropDwon(dd){
  var input = document.getElementById('seedoc')
  if(dd.value == '') input.disabled = true; else input.disabled = false;
}

<select class='corpusname' id='corpusname' size='1' name='corpusname' required onchange="ValidateDropDwon(this)">
     <option value=''>Select a corpus</option>
     <option value='test'>test</option>
</select>

<input type='submit' id='seedoc' class='seedoc' disabled value='See doc' />

【讨论】：

【解决方案3】：

既然你列出了jQuery，我将在这里使用它。

echo "<select class='corpusname' id='corpusname' size='1'
              name='corpusname' required onChange='enableButton()' />
      <option value=''>Select a corpus</option>";

// This query gives the other options from a database
$result = mysqli_query($db, "SELECT * FROM corpus_info") or die(mysqli_error($db));
while($cpsmlg = mysqli_fetch_array($result)){
    echo "<option value='".$cpsmlg['corpus']."'>".$cpsmlg['title']."</option>";
}
echo "</select>

<a id='theLink' target='_blank'>

// This is the button to be disabled
<input type='button' id='seedoc' class='seedoc' disabled value='See doc' /></a>";

然后页面上的一些javascript来完成onchange()

<script type="text/javascript">
    function enableButton(){
      $("#seedoc").prop('disabled', false);
    }
</script>

我会输入支票，if corpusname = ''...，但它永远不会改回''，所以onChange() 就足够了。

【讨论】：

【解决方案4】：

如果你有 Jquery，你可以使用这个（最简单）：

$('#corpusname').on("change",function(){
    if($(this).val() == ''){
        $('#seedoc').attr('disabled','disabled'); //Disables if Values of Select Empty
    }else{
        $('#seedoc').removeAttr('disabled');  
    }
});

【讨论】：