如何禁用按钮如果我在下拉列表中选择否

How to disable button If I select NO in dropdown list

本文关键字：下拉列表 选择 何禁用 按钮 如果      更新时间：2023-09-26

代码如下：

<select id="productextra[@count@]">
<option value="[@option_id@]">Yes</option>
<option value="[@option_id@]">No</option>
</select>

应禁用的按钮为：添加到购物车

为您的选择编写一个onchange事件，并找到所选值

<button id="btnSubmit" type="submit">Add to cart</button>

JS

$("select").on('change',function(){
   if($(this).find('option:selected').text()=="No")
       $("#btnSubmit").attr('disabled',true)
   else
       $("#btnSubmit").attr('disabled',false)
});

示例代码段

$("select").on('change',function(){
   if($(this).find('option:selected').text()=="No")
       $("#btnSubmit").attr('disabled',true)
   else
       $("#btnSubmit").attr('disabled',false)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="productextra[@count@]">
<option value="[@option_id@]">Yes</option>
<option value="[@option_id@]">No</option>
</select>
<button id="btnSubmit" type="submit">Add to cart</button>

var sel = document.getElementById('productextra');
var sv = sel.options[sel.selectedIndex].value;

这将给出所选选项的值，在该选项中，您可以使用禁用按钮

document.getElementById("myBtn").disabled = true;

您的HTML应该是这样的：

<select id="productextra0">
<option value="0">Yes</option>
<option value="1">No</option>
</select>
<button type="submit" id="submit-button">Add to cart</button>

和javascript:

window.onload=function()
{
    document.getElementById("productextra0").onchange=function()
    {
        if(this.options[this.selectedIndex].value==1)
        {
            document.getElementById("submit-button").disabled=true;
        }
        else
        {
            document.getElementById("submit-button").disabled=false;
        }
    }
}

这是的工作演示

我为添加到购物车按钮添加了一个id，这样就可以通过javascript document.getElementById轻松访问它，现在我为dropdown onchange事件添加了事件处理程序，这意味着每次dropdown更改值时都会触发一个函数。当下拉菜单更改其值时，该功能将检查其是否等于1，然后它将禁用您的添加到购物车按钮，否则它将启用它。

我还将该函数放入windows.onload中，这样我们就可以确保onchange函数只有在准备好或已经由浏览器创建时才会附加到下拉列表中。

按钮

<button id="btn" type="submit">Add to cart</button>

jquery

$("#btn").prop("disabled", true);
相关文章：