JavaScript控制按钮可用或不可用的方法,js和jque
分类:计算机网络

设置disabled属性为true即为不可用状态。

设置disabled属性为true即为不可用状态。
JS:

正文先为我们分享按钮组的施用办法,具体内容如下

本文实例陈诉了JavaScript调节按键可用或不可用的方法。分享给大家供我们仿效。具体如下:

JS

复制代码 代码如下:

一、按钮组(Button Groups)

上边包车型客车JS代码通过按键对象的disabled属性调整按键是或不是可用

document.getElementByIdx("btn").disabled=true;

document.getElementByIdx("btn").disabled=true;

1、单个按键组
用.btn-group封装多少个带.btn的<button>

<!DOCTYPE html>
<html>
<body>
<form>
Buttons:
<input type="button" id="firstbtn" value="OK">
<input type="button" id="secondbtn" value="OK">
</form>
<p>Click the button below to disable the first button above.
</p>
<button onclick="disableElement()">Disable button</button>
<script>
function disableElement()
{
document.getElementById("firstbtn").disabled=true;
}
</script>
</body>
</html>

jquery

jquery

<div class="btn-group"> 
 <button class="btn">1</button> 
 <button class="btn">2</button> 
 <button class="btn">3</button> 
</div> 

愿意本文所述对咱们的javascript程序设计具有支持。

$("#btn").attr("disabled", true);

复制代码 代码如下:

2、多少个按键组
将多个<div class="btn-group">放进<div class="btn-toolbar">中。

您恐怕感兴趣的篇章:

  • JS自动倒计时30秒后按键才可用(二种境况)
  • JS落成点击复选框将按键或文本框变为鲜青不可用的主意
  • javascript实现表单提交后,提交开关不可用的措施
  • js和jquery使按键失效为不可用状态的方式
  • JS调节按键10分钟后可用的法子

html

$("#btn").attr("disabled", true);

<div class="btn-toolbar"> 
 <div class="btn-group"> 
  ... 
 </div> 
 <div class="btn-group"> 
  ... 
 </div> 
</div> 
<input type="button" value="提交" id="btn">

html:

3、垂直按键组
向.btn-group添加.btn-group-vertical。

你恐怕感兴趣的篇章:

  • 纯js实现悬浮按钮组件
  • JS组件Bootstrap开关组与下拉开关详解
  • js点击button按键跳转到另二个新页面
  • js和jquery使按钮失效为不可用状态的点子
  • JavaScript给按钮绑定点击事件(onclick)的章程
  • xmlplus组件设计连串之列表(4)
  • xmlplus组件设计连串之开关(2)

复制代码 代码如下:

<div class="btn-group btn-group-vertical"> 
 ... 
</div> 

<input type="button" value="提交" id="btn">

二、下拉按键(Button Dropdowns)

你大概感兴趣的小说:

  • 纯js实现悬浮开关组件
  • JS组件Bootstrap开关组与下拉开关详解
  • js点击button按键跳转到另叁个新页面
  • js和jquery设置disabled属性为true使按键失效
  • JavaScript给开关绑定点击事件(onclick)的议程
  • xmlplus组件设计连串之列表(4)
  • xmlplus组件设计种类之开关(2)

例子

<div class="btn-group"> 
 <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
  Action 

 </a> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div> 

1、调节大小 一样使用.btn-large、.btn-small、.btn-mini调整大小。

2、分割的下拉开关

<div class="btn-group"> 
 <button class="btn">Action</button> 
 <button class="btn dropdown-toggle" data-toggle="dropdown"> 

 </button> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div> 

3、向上出现的美食指南

<div class="btn-group dropup"> 
 <button class="btn">Dropup</button> 
 <button class="btn dropdown-toggle" data-toggle="dropdown"> 

 </button> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div> 

三、JavaScript

例子
加载状态。增添data-loading-text="Loading..."。

复制代码 代码如下:

<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button> 

开关状态。增添data-toggle="button"。

复制代码 代码如下:

<button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>

复选框。在btn-group后添加data-toggle="buttons-checkbox"。

<div class="btn-group" data-toggle="buttons-checkbox"> 
 <button type="button" class="btn btn-primary">Left</button> 
 <button type="button" class="btn btn-primary">Middle</button> 
 <button type="button" class="btn btn-primary">Right</button> 
</div> 

单选。在btn-group后添加data-toggle="buttons-radio"。

<div class="btn-group" data-toggle="buttons-radio"> 
 <button type="button" class="btn btn-primary">Left</button> 
 <button type="button" class="btn btn-primary">Middle</button> 
 <button type="button" class="btn btn-primary">Right</button> 
</div> 

用法 JavaScript代码触发按钮状态。
$().button("toggle") 
也可增加data-toggle属性自动触发。
<button type="button" class="btn" data-toggle="button" >…</button> 

选取JavaScript代码触发加载状态,同有的时候候按键呈现data-loading-text属性内定的值。

$().button("loading") 

<button type="button" class="btn" data-loading-text="loading stuff..." >...</button> 
只顾:Firefox在页面载入时会保持开关无效状态。变通方案是在按键上应用autocomplete="off"。

选拔JavaScript代码重新恢复设置开关状态。
$().button("reset") 

复位开关状态,并将开关文字变成内定的文字。下例的complete仅为例子,能够替换。

<button class="btn" data-complete-text="finished!" >...</button> 
<script> 
 $('.btn').button('complete') 
</script> 

上述正是本文的全部内容,希望对我们的学习抱有匡助。

您或者感兴趣的作品:

  • 纯js达成悬浮按键组件
  • js点击button开关跳转到另二个新页面
  • js和jquery使按键失效为不可用状态的点子
  • js和jquery设置disabled属性为true使按键失效
  • JavaScript给按钮绑定点击事件(onclick)的艺术
  • xmlplus组件设计连串之列表(4)
  • xmlplus组件设计体系之按键(2)

本文由美高梅网址发布于计算机网络,转载请注明出处:JavaScript控制按钮可用或不可用的方法,js和jque

上一篇:和js的混合编程,如何正确使用Nodejs 下一篇:后台数据,Json实现分页显示附效果图
猜你喜欢
热门排行
精彩图文