Question

我有两个搜索栏div，选择元素时需要在两个div之间切换。当我切换任一按钮时，应该将其隐藏并禁用，切换效果很好，但始终显示已禁用的第二div。我尝试了此代码，但无法正常工作。

更新的代码

$("#tag-search-box").hide().find('input').prop('disabled', true);
$("#search_type").change(function() {
    $("#search-box, #tag-search-box").toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2 form-group row">
       <select name="type" id="search_type" class="form-control form-control-sm">
          <option>Books</option>
          <option>Tag</option>
       </select>
 </div>
 <div class="col-md-10 form-group mb-5 align-items-end" id="search-box">
     <input id="search" name="search" type="text" placeholder="Search books" autocomplete="off">
     <input id="search_submit" value="Search" type="submit">
 </div>
     <div class="col-md-10 form-group mb-5 align-items-end" id="tag-search-box">
     <input id="search" name="search" type="text" placeholder="Search books" autocomplete="off">
     <input id="search_submit" value="Search" type="submit">
 </div>

Answer 1

您也应该切换输入disable属性。类似于以下内容：

$("#tag-search-box").hide().find('input').prop('disabled', true);
$("#search_type").change(function() {
    $("#search-box, #tag-search-box").toggle();
    var inpts=$("#search-box, #tag-search-box").find('input');
    $.each(inpts, function(idx, inpt){
          $(inpt).prop('disabled', !$(inpt).prop('disabled'));
    })
});

$("#tag-search-box").hide().find('input').prop('disabled', true);
$("#search_type").change(function() {
    $("#search-box, #tag-search-box").toggle();
    var inpts=$("#search-box, #tag-search-box").find('input');
    $.each(inpts, function(idx, inpt){
          $(inpt).prop('disabled', !$(inpt).prop('disabled'));
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2 form-group row">
       <select name="type" id="search_type" class="form-control form-control-sm">
          <option>Books</option>
          <option>Tag</option>
       </select>
 </div>
 <div class="col-md-10 form-group mb-5 align-items-end" id="search-box">
     <input id="search" name="search" type="text" placeholder="Search books" autocomplete="off">
     <input id="search_submit" value="Search" type="submit">
 </div>
 <div class="col-md-10 form-group mb-5 align-items-end" id="tag-search-box">
     <input id="tokenfield" name="search" type="submit" placeholder="Search books by tags" autocomplete="off">
 </div>

Answer 2

您必须尝试这样的事情：

HTML

 <div class="col-md-2 form-group row">
       <select name="type" id="search_type" class="form-control form-control-sm">
          <option>Books</option>
          <option>Tag</option>
       </select>
 </div>


 <div class="col-md-10 form-group mb-5 align-items-end" id="search-box">
     <input id="search" name="search" type="text" placeholder="Search books" autocomplete="off">
     <input class="search_submit" value="Search" type="submit">
 </div>

 <div class="col-md-10 form-group mb-5 align-items-end" id="tag-search-box">
     <input id="tokenfield" name="search" type="text" placeholder="Search books by tags" autocomplete="off">
   <input class="search_submit" value="Search" type="submit">
 </div>

JS

 $(function() {
  $("#tag-search-box").hide().find('input:not([type="submit"])').prop('disabled', true);
  $("#search_type").change(function() {
    $("#tag-search-box,#search-box").toggle();
    $(".align-items-end:hidden").find('input:not([type="submit"])').prop('disabled', true);
    $(".align-items-end:visible").find('input:not([type="submit"])').prop('disabled', false);
  });
});

codepen

通过切换隐藏和禁用两个div

2 个答案: