<button type="button" class="btn btn-success uppercase" onclick="fun()">登录</button> 使用JS脚本,禁止按钮交互
时间: 2023-10-08 12:05:55 浏览: 40
要禁止按钮的交互,你可以使用JavaScript来设置按钮的`disabled`属性为`true`。下面是一个示例代码,你可以将其添加到你的脚本中:
```javascript
function disableButton() {
var button = document.querySelector(".btn");
button.disabled = true;
}
function fun() {
// 执行登录逻辑
// ...
// 禁止按钮交互
disableButton();
}
```
在上面的示例中,我们定义了一个名为`disableButton()`的函数,它使用`document.querySelector()`方法来选择具有`.btn`类的按钮元素,并将其`disabled`属性设置为`true`。然后,在`fun()`函数中,当执行完登录逻辑后,我们调用`disableButton()`函数来禁止按钮的交互。
这样,当用户点击按钮时,按钮将被禁用,并且不再响应任何点击事件。请确保将上述代码放置在正确的位置,以便在按钮被点击时调用`fun()`函数。
相关问题
怎么用这段代码实现<button type="button" class="layui-btn">默认按钮</button> <button type="button" class="layui-btn layui-btn-warm">暖色按钮</button> <button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
这段代码使用的是layui框架中的按钮样式。你需要在页面中引入layui框架的css和js文件,然后在html中使用下面的代码即可实现三个不同样式的按钮:
```
<button type="button" class="layui-btn">默认按钮</button>
<button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
<button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
```
如果你没有引入layui框架,那么这些按钮就无法正常显示样式。你可以在layui官网下载相应的文件,或者使用CDN链接。
<button type="submit" class="btn btn-info" >提交</button>颜色属性怎么加
您可以在按钮的class属性中添加颜色的描述词,如下所示:
```
<button type="submit" class="btn btn-info btn-primary">提交</button>
```
在这个例子中,我们添加了`btn-primary`类来改变按钮的颜色为蓝色,您可以根据需要选择其他颜色描述词。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
if (d.groundingState == 0 || d.groundingState == 3) {//layui-btn-disabled edit result = 编辑 上架 下架 详情 } else if (d.groundingState == 1) { result = 编辑 上架 下架 详情 } else if (d.groundingState == 2) { result = 编辑 上架 下架 详情 } else if (d.groundingState == 4 || d.groundingState == 5) { result = 编辑 上架 下架 详情 }优化一下
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)