如何使用jQuery禁用/启用按钮？
[英]How do I disable/enable buttons using jQuery?
问题描述
I'm working on a project for class, and I'm pretty much an absolute beginner at this sort of thing. 
我正在为一个课堂项目工作，而我在这种事情上几乎是绝对的初学者。 I have a server running on Ubuntu. 我有一台在Ubuntu上运行的服务器。 Inside script.js I have 在script.js中，我有
$(document).ready(function(){
$.get('/var/www/html/hadoopstatus.txt', function(response) {
var $hadoopstatus = response;
}, "text");
if ($hadoopstatus == 'Running'){
document.getElementById('b2').disabled = false;
}
if ($hadoopstatus == 'Stopped'){
document.getElementById('b1').disabled = false;
}
});
And inside index.html I have 在index.html中，我有
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="script.js"></script>
// some stuff
</head>
<body>
// stuff
<form method="post">
<button type="submit" id="b1" disabled>Start Hadoop</button>
<button type="submit" id="b2" disabled>Stop Hadoop</button>
</form>
// stuff
</body>
/var/www/html/hadoopstatus.txt contains only /var/www/html/hadoopstatus.txt仅包含
Running
The problem I'm having is that the buttons, in this case the button "Stop Hadoop", will not enable. 我遇到的问题是按钮（在这种情况下为“ Stop Hadoop”按钮）将无法启用。 What am I doing wrong? 我究竟做错了什么？
3 个解决方案
解决方案1
1 2016-03-07 21:22:00
$.get function is async, so you have to wait until it complete. $ .get函数是异步的，因此您必须等待它完成。
so change you code to : 因此将您的代码更改为：
$.get('/var/www/html/hadoopstatus.txt', function(response) {
var $hadoopstatus = response;
if ($hadoopstatus == 'Running') {
document.getElementById('b2').disabled = false;
}
if ($hadoopstatus == 'Stopped') {
document.getElementById('b1').disabled = false;
}
}, "text");
for complete control : 完全控制：
var jqxhr = $.get('/var/www/html/hadoopstatus.txt', function(response) {
alert( "success" );
if (response == 'Running') {
document.getElementById('b2').disabled = false;
}
if (response == 'Stopped') {
document.getElementById('b1').disabled = false;
}
}, "text")
.done(function() {
alert( "second success" );
})
.fail(function() {
alert( "error" );
})
.always(function() {
alert( "finished" );
});
解决方案2
0 2016-03-07 21:31:29
You've got two problems. 你有两个问题。 The first is that you've defined the $hadoopstatus variable in your callback function. 首先是您在回调函数中定义了$hadoopstatus变量。 Once the callback function exits, the variable will be wiped out. 退出回调函数后，该变量将被清除。 But another and more serious problem is that you're making an AJAX call which could take a couple seconds to complete. 但是另一个更严重的问题是您要进行AJAX调用，这可能需要几秒钟才能完成。 But immediately after initiating that call, you're checking for the value of $hadoopstatus . 但是，在发起该调用之后，您将立即检查$hadoopstatus的值。
This is a problem with asynchronous programming. 这是异步编程的问题。 You need to remember that AJAX calls will finish some time after you initiate it. 您需要记住，启动AJAX调用将在一段时间后结束。 That's WHY there is a callback function. 这就是为什么有一个回调函数。 That code will run when the AJAX call has finished loading data... whether that's a few milliseconds or 10 seconds. 该代码将在AJAX调用完成加载数据后运行，无论是几毫秒还是10秒。
I adjusted your code to fit all of the business logic into your callback function. 我调整了代码，以使所有业务逻辑都适合您的回调函数。 When the AJAX call is complete, it will create the $hadoopstatus variable from the response, then check the value and disable the appropriate button. AJAX调用完成后，它将从响应中创建$hadoopstatus变量，然后检查该值并禁用相应的按钮。
$(document).ready(function(){
$.get('/var/www/html/hadoopstatus.txt', function(response) {
var $hadoopstatus = response;
if ($hadoopstatus == 'Running'){
document.getElementById('b2').disabled = false;
}
if ($hadoopstatus == 'Stopped'){
document.getElementById('b1').disabled = false;
}
}, "text");
});
Remember that the value of $hadoopstatus won't be available outside of this function because you created the "var" inside the function. 请记住， $hadoopstatus的值在此函数之外将不可用，因为您在函数内部创建了“ var”。 When the function is finished, so is the variable. 函数完成后，变量也将完成。 If you use the "var" command before the AJAX call, you'll still have a problem because maybe it won't contain the value when your code tries to run it because of the loading delay. 如果在AJAX调用之前使用“ var”命令，您仍然会遇到问题，因为由于加载延迟，当您的代码尝试运行它时，它可能不包含该值。 In other words, be careful when expecting your AJAX call to be instantaneous. 换句话说，在期望您的AJAX调用是瞬时的时要小心。 It probably won't be. 可能不会。
解决方案3
0 已采纳 2016-03-07 21:35:29
Another possible solution is: 另一个可能的解决方案是：
$(function() {
$.get('hadoopstatus.txt', function(response) {
switch (response.trim()) {
case 'Running':
document.getElementById('b2').disabled = false;
break;
case 'Stopped':
document.getElementById('b1').disabled = false;
break;
}
}, "text");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<form method="post">
<button type="submit" id="b1" disabled>Start Hadoop</button>
<button type="submit" id="b2" disabled>Stop Hadoop</button>
</form>
Evaluate the response in the .get function. 在.get函数中评估响应。 It is an asyncronous function. 这是一个异步功能。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.