禁用/启用按钮和链接的最简单方法是什么(jQuery + Bootstrap)

jQuery CSS

村村番长

2020-03-20

有时我使用样式设置为按钮的锚,有时我仅使用按钮。我想禁用特定的clicky-thing,以便:

  • 他们看起来很残疾
  • 他们不再被点击

我怎样才能做到这一点?

第2478篇《禁用/启用按钮和链接的最简单方法是什么(jQuery + Bootstrap)》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

5个回答
Sam小哥Tom 2020.03.20

假设您在页面上有这些按钮,例如:

<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit"value="Enable All" onclick="change()"/>

js代码:

function change(){
   var toenable = document.querySelectorAll(".byBtn");        
    for (var k in toenable){
         toenable[k].removeAttribute("disabled");
    }
}
Sam小哥逆天 2020.03.20

这是一个比较晚的答案,但是我偶然发现了这个问题,同时在寻找一种方法来单击单击后可能禁用boostrap按钮并可能添加一个不错的效果(例如微调器)。我找到了一个很好的库,它确实做到了:

http://msurguy.github.io/ladda-bootstrap/

您只需包括所需的CSS和JS,向按钮添加一些属性,然后使用javascript启用lada。您的按钮焕然一新(请查看演示以了解它的美丽)!

小哥TomA 2020.03.20

我知道我的答案来晚了,但是IMO这是切换“启用”和“禁用”按钮的最简单方法

function toggleButtonState(button){

  //If button is enabled, -> Disable
  if (button.disabled === false) {
    button.disabled = true;

  //If button is disabled, -> Enable
  } else if (button.disabled === true) {
    button.disabled = false;
  }
}
小哥前端 2020.03.20

对于这种行为,我始终使用jQueryUI button小部件,将其用于链接和按钮。

在HTML中定义标签:

<button id="sampleButton">Sample Button</button>
<a id="linkButton" href="yourHttpReferenceHere">Link Button</a>

使用jQuery初始化按钮:

$("#sampleButton").button();
$("#linkButton").button();

使用button小部件方法来禁用/启用它们:

$("#sampleButton").button("enable"); //enable the button
$("#linkButton").button("disable"); //disable the button

这将解决按钮和光标的行为,但是如果您需要更深入地了解并在禁用时更改按钮样式,请覆盖页面CSS样式文件中的以下CSS类。

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
      background-color:aqua;
      color:black;
 }

但是请记住:那些CSS类(如果已更改)也将更改其他小部件的样式。

Pro神奇 2020.03.20

我知道我晚会晚了,但要具体回答两个问题:

“我只想禁用特定的clicky-thing,以便:

  • 他们停止点击
  • 他们看起来很残疾

这有多难?”

他们停止点击

1.对于像<button>或的按钮<input type="button">您添加属性:disabled

<button type="submit" disabled>Register</button>
<input type="button" value="Register" disabled>

2.对于链接,任何链接...实际上,任何HTML元素,都可以使用CSS3 指针事件

.selector { pointer-events:none; }

当今最先进的技术(14/12/5)对浏览器对指针事件的支持非常棒。但是我们通常必须在IE领域中支持旧版浏览器,因此IE10及以下版本不支持指针事件:http : //caniuse.com/pointer-events因此,使用此处其他人提到的JavaScript解决方案之一可能是旧版浏览器的方法。

有关指针事件的更多信息:

他们看起来很残疾

显然,这是一个CSS答案,因此:

1.对于类似<button><input type="button">使用[attribute]选择器的按钮

button[disabled] { ... }

input[type=button][disabled] { ... }

-

这是一个基本的演示,其中包含我在这里提到的内容:http : //jsfiddle.net/bXm5B/4/

希望这可以帮助。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android