Question

我正在开发一款RoR应用。我想保持搜索btton禁用，直到在搜索框中输入内容。

我尝试了以下内容：

<%if Voylla::Application.config.search_swiftype_enabled %>
<form>
<input type="text" id="st-search-input" class="st-search-input" />
</form>
<script type="text/javascript">
  var Swiftype = window.Swiftype || {};
  (function() {
    Swiftype.key = 'Lefxmsx2p9qdqxmxxqSR';
    Swiftype.inputElement = '#st-search-input';
    Swiftype.resultContainingElement = '#st-results-container';
    Swiftype.attachElement = '#st-search-input';
    Swiftype.renderStyle = "inline";

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = "//swiftype.com/embed.js";
    var entry = document.getElementsByTagName('script')[0];
    entry.parentNode.insertBefore(script, entry);
  }());
</script>
<%elsif Voylla::Application.config.google_custom_search_enabled %>
  <div id='search-box'>
  <%= form_tag "/search", :method => :get, :id => "search-form" do %>
    <%= text_field_tag :q, params[:q], {:id => "search-text", :placeholder => "SEARCH FOR PRODUCTS"} %>
    <%= submit_tag "Go" %>
<script>
$(document).ready(function() {
    if($('#text_field').val() ==  "")
      $('#submitButtonId').attr('disabled', true);
      $('#text_field').keyup(function(){
        if($('#text_field').val() !=  "")
          $('#submitButtonId').attr('disabled', false);
        else
          $('#submitButtonId').attr('disabled', true);
      });
});
</script>
    <%end%>
  </div>
<%else%>
  <%= form_tag products_url, :method => :get do  %>
    <%= text_field_tag :keywords, params[:keywords], {:id => "productSearch", :placeholder => "Search"} %>
  <%end%>
<%end%>

但是搜索按钮始终处于启用状态，即使搜索框为空

也是如此

编辑：来自浏览器的代码：

<div id="search-box">
<form></form>
<input id="search-text" name="q" placeholder="SEARCH FOR PRODUCTS" type="text" value>
<input name="Commit" type="submit" value="Go">
<script>
$('#search-text').on('keydown keyup change', function(){
    if($(this).val() == ''){
        $('#submitButtonId').attr('disabled', 'disabled');
    }else{
        $('#submitButtonId').removeAttr('disabled');
    }
}).trigger('change');
<script>

Answer 1

试试这个：

$('#search-text').on('keydown keyup change', function(){
    var $submit = $(this).nextAll('input[type="submit"]:eq(0)');
    if($(this).val() == ''){
        $submit.attr('disabled', 'disabled');
    }else{
        $submit.removeAttr('disabled');
    }
}).trigger('change');

这是一个小提琴，所以你可以测试它：http://jsfiddle.net/merrifield69/hAHHZ/

Answer 2

试试这种方式

HTML

<input type="text" id="text_field"/>
<button type="submit" id="submitButtonId">Submit</button>

脚本

    $(document).ready(function() {
      if($('#text_field').val() == "")
      $('#submitButtonId').attr('disabled', true);
      $('#text_field').keyup(function(){
        if($(this).val() != "")
          $('#submitButtonId').attr('disabled', false);
        else
          $('#submitButtonId').attr('disabled', true);
      });
   });

DEMO

仅当text_field不为空时如何启用按钮

2 个答案: