如果输入字段为空，则禁用 <a 类按钮答案

【问题标题】：Disable <a class button if input fields empty如果输入字段为空，则禁用 <a 类按钮
【发布时间】：2015-10-16 02:12:12
【问题描述】：

我知道使用

【问题讨论】：

【解决方案1】：

将事件绑定到两个输入，并检查两者是否都有值。然后启用链接。

$('#one, #two').blur(function() {
   if($('#one').val() !== "" && $('#two').val() !== "") {
       $('.button').attr('href','#');
   } else {
      $('.button').removeAttr('href');
   }
});

并将您的 html 更改为：

<a class="button">OK</a>

以便在页面加载时禁用链接。这是JSFiddle demo。

【讨论】：

你成功了！谢谢。

【解决方案2】：

$(document).ready(function() {

  $inputs = $('#one,#tow');
  $inputs.change(check);
  $submit = $('#submit');

  function check() {
    var result = 1;
    for (var i = 0; i < $inputs.length; i++) {
      if (!$inputs[i].value) {
        result = 0;
        break;
      }
    }
    if (result) {
      $submit.removeAttr('disabled');
    } else {
      $submit.attr('disabled', 'disabled');
    }
  }

  check();
});

建议使用角形

【讨论】：

【解决方案3】：

$(document).ready(function(){
       //$(".button").attr('disabled', "disabled");
        $(".button").click(function(){
           one = $("#one").val();
           two = $("#two").val();
           if(one && two){
             ///both fields filled. 
             return true;
           }
           //one or both of them is empty
                  
 
          return false;
       });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="one" type="text">
<input id="two" type="text">
<a href="#" class="button">OK</a>

【讨论】：

不应该是two = $("two").val( )吗？

【解决方案4】：

如果遇到这种情况，这是我的实现。首先，我使用这种样式在页面加载时将禁用的类添加到锚标记：

.disabled {
  color : gray // gray out button color
  cursor : default; // make cursor to arrow
  // you can do whatever styling you want
  // even disabled behaviour
}

我们使用 jquery 将这些类与 keyup 事件一起添加到准备好的文档中，如下所示：

$(function () {

   // add disabled class onto button class(anchor tag)
   $(".button").addClass('disabled');

   // register keyup handler on one and two element
   $("#one, #two").keyup(function () {

      var one = $("#one").val(),
          two = $("#two").val();
      // checking if both not empty, then remove class disabled
      if (one && two) $(".button").removeClass('disabled');
      // if not then add back disabled class
      else $(".button").addClass('disabled');

   });

   // when we pressing those button
   $('.button').click(function (e) {
     // we check if those button has disabled class yet
     // just return false
     if ($(this).hasClass('disabled')) return false;
   });
});

DEMO

【讨论】：