代码之家 › 专栏 › 技术社区 › skr

如何使用javascript以编程方式启用和禁用按钮

html5 jquery javascript

1

skr · 技术社区 · 6 年前

我想一开始禁用一个按钮。一旦满足条件,我想启用按钮。我尝试了下面的按钮,但按钮未启用。

<button class="search btn right-align search-button disabled" id="view-btn">
Hello
</button>

$('#submit_query').click(function(){
document.getElementById("myBtn").disabled = false; 

}

5 回复 | 直到 6 年前

1

2

alanfcm 6 年前

如果使用jQuery更简单:

$('#submit_query').click(function(){
$("#myBtn").attr("disabled","false"); 

});

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<button class="search btn right-align search-button disabled" id="myBtn">
Hello
</button>

<button id="submit_query">Submit</button>

2

1

Yevgeny Kolesnik 6 年前

确保你的#ID与你的HTML按钮控件匹配,并且你正在引入jQuery。然后,要启用要执行此操作的元素,请执行以下操作:

$('#enable').click(function(){
  $("#view-btn").removeAttr("disabled"); 
});

以及禁用:

$('#disable').click(function(){
  $("#view-btn").attr("disabled","true"); 
});

例如: http://jsbin.com/xigeyixoji/edit?html,output

3

0

Namig Ismayilov 6 年前

试试这个:

function myFunction() {
    document.getElementById("myBtn").disabled = false;
}

<html>
<body>

<button id="myBtn" disabled>My Button</button>

<p>Click the button below to disable the button above.</p>

<button onclick="myFunction()" >Try it</button>



</body>
</html>

4

0

G Cadogan 6 年前

在提供的代码中,button元素的id是“view btn”,而JavaScript代码使用的是getElementById,使用的是“myBtn”。

此外,按钮被指定为“禁用”类,该类可能会禁用按钮,也可能不会实际禁用按钮。“disabled”是一个独立于类的属性。

此外,JavaScript使用jQuery来分配点击处理程序。使用jQuery启用控件的标准方法是: $("#view-btn").prop("disabled", false );

5

0

Poulima Biswas 6 年前

<button class="search btn right-align search-button" disabled id="view_btn">
Hello
</button>

<button class="search btn right-align search-button"  id="submit_query">
click me
</button>

var myHTML = document.querySelector('#submit_query');
myHTML.onclick = function() {
console.log(1);
  document.getElementById("view_btn").disabled = false; 
};

相关链接: http://jsfiddle.net/765ogwf1/11/