在 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);
                }
}