HTML/JQuery:禁用span /按钮单击(灰显并禁用单击)
在HTML和jQuery中，如果你想要禁用一个<span>元素或者按钮的单击事件，并且使其显示为灰色不可点击的状态，你可以通过以下几种方式来实现：
HTML部分
首先，你可以使用disabled属性来禁用按钮，但是请注意disabled属性只能用于表单元素，如<button>、<input>等，而不能直接用于<span>元素。
<button id="myButton" disabled>禁用的按钮</button>
<span id="mySpan">这是一个span元素</span>CSS部分
使用CSS来改变禁用元素的样式，使其看起来是灰色的。
.disabled {
color: gray;
pointer-events: none; /* 阻止所有鼠标事件 */
}jQuery部分
使用jQuery来动态地添加或移除禁用状态，并且改变样式。
$(document).ready(function() {
// 禁用按钮和span
$('#myButton').addClass('disabled');
$('#mySpan').addClass('disabled');
// 如果你想在某些条件下启用它们
// $('#myButton').removeClass('disabled');
// $('#mySpan').removeClass('disabled');
});完整示例
以下是一个完整的示例，展示了如何禁用按钮和<span>元素，并且改变它们的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>禁用元素示例</title>
<style>
.disabled {
color: gray;
pointer-events: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// 禁用按钮和span
$('#myButton').addClass('disabled');
$('#mySpan').addClass('disabled');
});
</script>
</head>
<body>
<button id="myButton">按钮</button>
<span id="mySpan">这是一个span元素</span>
</body>
</html>解释
disabled属性：直接在HTML中设置，使按钮不可点击。.disabledCSS类：通过设置color: gray;来改变文本颜色，使其看起来是灰色的；通过pointer-events: none;来阻止鼠标事件，使元素不可点击。- jQuery：用于动态地添加或移除
.disabled类，从而控制元素的禁用状态。
这种方法适用于任何需要禁用元素并改变其外观的场景，例如表单验证失败后的错误提示，或者在某些操作不可用时提供用户反馈。
相关·内容
我有两个在单击时显示特定信息的跨度，我不确定如何才能在单击另一个时灰显跨度，使其看起来像禁用的按钮。我的代码如下。$("#odd").hide();}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/j
浏览 125提问于2021-07-01得票数 0
回答已采纳
我想在按钮单击事件期间灰显div的特定部分。例如，如果我们在两个文本框中传递了值，并单击了将值提交到数据库的按钮，此时屏幕应该会灰显，所有小部件都处于禁用模式。
浏览 1提问于2014-03-10得票数 0
1回答
如果在下拉菜单中未选择任何内容，则搜索按钮将灰显/不可单击。按钮的源代码如下：<span class="search search-disabled" id="by_item">Search</span>
<span class="reset search-disabled" id="reset_item&qu
浏览 14提问于2017-08-10得票数 1
回答已采纳
通过代码，我尝试禁用该按钮，如下所示： floatingActionButton.setEnabled(false);这将使该按钮不可单击，但它看起来仍处于活动状态如何指示(灰显)该按钮已禁用？
浏览 1提问于2020-09-05得票数 0
我是javascript/jquery的初学者。<% using (Html.BeginForm()) { %> <%:(ViewData["ErrorMessage"])%>
浏览 0提问于2011-10-18得票数 0
回答已采纳
我有一个div，它的工作方式类似于提交按钮，所以当用户单击它时，它会提交一个表单，并向服务器发送一个ajax请求。我遇到的问题是，如果用户按下按钮，即使是AJAX请求，它也会创建副本。所以我想要做的就是禁用并重命名为“请稍等...”直到请求完成。以防止双重提交。谢谢
浏览 3提问于2013-06-04得票数 0
回答已采纳
2回答
在联系我们表单中显示处理指示器
、、、、
我的网站中有一个使用ASP.NET 的联系我们页面
当客户端填写表单并单击submit时，不会显示页面正在处理表单的任何迹象，因此其中一些客户端单击了两次submit按钮。
浏览 0提问于2012-10-04得票数 0
回答已采纳
问题是，每个组项目都可以单击，即使它们不包含子项。 }我更希望有一个上面提到的视觉效果(禁用/灰显可扩展按钮)，并让这个Toast在他们点击它时显示出来。因为当您<e
浏览 1提问于2011-03-10得票数 2
回答已采纳
我正在尝试禁用面板上所有可点击、可编辑的组件。
调用panel.disable()会使其灰显，但仍然可以单击按钮。相同的结果为panel.cascade提供了一个禁用每个组件的函数。
浏览 2提问于2012-02-21得票数 12
回答已采纳
如何禁用asp.net链接按钮和asp.net单选按钮。我用过但是我可以点击按钮，它们已经变灰了
浏览 0提问于2010-08-13得票数 0
回答已采纳
我想使用jquery在单击特定按钮时禁用(灰显)我的复选框： 我的代码如下： <div id="nameTesting"> <label>
浏览 12提问于2020-04-23得票数 0
我正在使用我的网站页面上的引导按钮，我想更改禁用按钮的颜色。一个“灰显”的按钮，您无法单击。有没有办法可以用CSS改变颜色呢？有关于这个的类吗？
非常感谢!
浏览 1提问于2016-03-06得票数 21
回答已采纳
嗯，我的应用程序要求我在单击按钮时禁用整个网格。var .set= dijit.byId('myGrid')；网格禁用(‘.set’，true)；，但它不工作。我基本上需要“灰显”网格的所有内容，这样用户就不能选择任何行。因此，仅仅更改CSS对我没有帮助。谢谢，索尼娅
浏览 1提问于2011-07-04得票数 0
1回答
如何使用剃刀语法根据用户权限或mvc4应用程序中的角色禁用或灰显编辑或保存按钮。用户将看到该按钮，并且无法在MVC4中单击或选择该按钮。如何在MVC4剃须刀中检查验证？
浏览 2提问于2013-09-19得票数 0
在类似于HcmPayrollLine的表单上，我希望在创建记录后禁用每个记录的所有字段。因此，在我输入一条记录并单击new之后，我刚刚创建的记录应该被禁用/灰显。
非常感谢
浏览 0提问于2012-11-10得票数 0
回答已采纳
1回答
GUI设计:禁用标签？
、、、
我在网上找不到任何有用的东西来回答这个问题：我不是专门讨论HTML，而是任何桌面GUI工具包。问题是，标签通常放在另一个GUI元素的前面，如文本字段、下拉框、单选按钮等。当这些输入组件被动态禁用时，即根据其他GUI元素的状态，也禁用它的标签是不是一个好主意，即使它本身不提供输入方式？
浏览 0提问于2011-08-11得票数 1
回答已采纳
在excel 2007中打开该文件时，所有选项卡和命令都将禁用/灰显。甚至在查看选项卡中的保护/取消保护命令也被禁用。该文件在打开时不提供密码，并且不包含任何宏。
浏览 2提问于2009-12-18得票数 1
回答已采纳
我在Excel中有一个按钮，它运行一个从A列复制值的宏，我想要的是只允许在活动单元格在A列的情况下单击该按钮，如果该活动单元格在其他任何位置，则该按钮灰显或禁用？ 这个是可能的吗？?
浏览 16提问于2019-10-11得票数 0
15回答
我正在考虑的两种可能性包括：
不禁用select，而是禁用所有option，并使用CSS灰显选择，使其看起来像已禁用。将单击事件处理程序添加到提交按钮，以便在提交表单之前启用所有已禁用的下拉菜单。
浏览 227提问于2009-07-28得票数 197
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
