在AJAX功能成功之前不能禁用按钮

Question

我有2个输入字段，1是用所有值的下拉显示给用户。另一个输入字段是隐藏的。我的AJAX函数所做的是搜索与用户在第一个输入字段中选择的选项对应的id，并将该id放在第二个隐藏输入字段中。搜索查询从隐藏字段中获取id，用于过滤数据。

现在，由于某种原因，我不能通过id获得过滤器，因为id查找相应的值需要时间，并且我的提交按钮已经将用户移动到一个新页面。所以基本上我需要一种方法来禁用我的按钮，直到查询已经完成查找相应的id搜索查询。

当前视图类:

<?php if ($redirects): ?>
<form name="redirectform" action="admin/redirects" method="post">
<div>    
<input list="search-from-list" id="search-from" name="search-from" style="width:100%;"/>
<datalist id="search-from-list">
<?php foreach ($allredirects as $allredirect){ ?>
<option value="<?php echo $allredirect->from; ?>" id="<?php echo $allredirect->id; ?>" />
<?php } ?>
</datalist>
</div>
<input type="hidden" name="linkid" id="linkid" />
<input type="hidden" name="linkidto" id="linkidto" />
<input type="hidden" name="<?php echo $this->security->get_csrf_token_name();?>" value="<?php echo $this->security->get_csrf_hash();?>">
</div>

<input list="search-to-list" id="search-to" name="search-to" style="width:100%;" />
<datalist id="search-to-list">
<?php foreach ($allredirects as $allredirect){ ?>
<option value="<?php echo $allredirect->to; ?>" id="<?php echo $allredirect->id; ?>" />
<?php } ?>
</datalist>
</div>
</form>
<table>
<?php foreach ($redirects as $redirect): ?>
<tr>
<td><?php echo $from=str_replace('%', '*', $redirect->from);?></td>
<td><?php echo $redirect->to;?></td>
</tr>
<?php endforeach ?>
</table>
<?php echo form_close() ?> </div>
<?php else: ?>
<div class="no_data">No Data</div>
<?php endif ?>
//AJAX call
<script type="text/javascript">
$("#search-from").select(function(e){
var g = $('#search-from').val();
var id = $('#search-from-list').find("option[value='"+g+"']").attr('id');
$('#linkid').val(id);
});
$("#search-to").select(function(e){
var g = $('#search-to').val();
var id = $('#search-to-list').find("option[value='"+g+"']").attr('id');
$('#linkidto').val(id);
});
</script>

我已经尝试禁用按钮和删除禁用一旦值已进入第二个隐藏字段，但这没有工作:

$(document).ready(function(){
$("#search-from").select(function(e){    
var g = $('#search-from').val();
var id = $('#search-from-list').find("option[value='"+g+"']").attr('id');
$('#linkid').val(id);
$.ajax({success: function(result){
$("#submit").removeAttr("disabled");
}});
});
});

控制器类:

public function index()
{

if(isset($_POST["search-from"]) && !empty($_POST["search-from"])){      
if(isset($_POST["linkid"]) && !empty($_POST["linkid"])){
$from_id = $_POST["linkid"];
$this->template->redirects = $this->redirect_m->order_by('`from`')->get_by_id($from_id);
}
}else if(isset($_POST["search-to"]) && !empty($_POST["search-to"])){        
if(isset($_POST["linkidto"]) && !empty($_POST["linkidto"])){
$to_id = $_POST["linkidto"];
$this->template->redirects = $this->redirect_m->order_by('`to`')->get_by_id($to_id);
}
}else{
$this->template->redirects = $this->redirect_m->order_by('`from`')->limit($this->template->pagination['limit'], $this->template->pagination['offset'])->get_all();
}
$this->template->allredirects = $this->redirect_m->order_by('`from`')->get_all();
$this->template->build('admin/index');
}

Answer 1

当您使用AJAX时，您可以在发送请求之前禁用它，然后在请求完成时启用它

$.ajax({
beforeSend: function() {

$("#mybutton").prop('disabled', true);
},
statusCode: {},
success: function(res) {
//to Do
},
complete: function() {
$("#mybutton").prop('disabled', false);
}
}