Question

="" I know it's easy to do using < button > or < input type="submit" but how would you keep this button disabled unless both input fields are filled?

<input id="one" type="text">
<input id="two" type="text">
<a href="#" class="button">OK</a>

Answer 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。

Answer 2

＆＃13;

canvas.addEventListener('mouseover',fill,false);
canvas.addEventListener('mouseout',erase, false);
function fill(){
    circle.animate    = true;
    circle.direction  = 1;
}
function erase(){
    circle.animate    = true;
    circle.direction  = 0;  
}


function maths(){
    if(circle.animate == true){
        var amount  = circle.vector * deltaTime;
        if(circle.direction == 1){
            circle.curAngle += amount;
        }else if(circle.direction == 0){
            circle.curAngle -= amount;   
        }

        if(circle.curAngle % 2 == 0){
            circle.curAngle = 0;
        }
        if(circle.curAngle == circle.endAngle){
            circle.animate = false;   
        }

   }
}

function draw(){
    deltaTime = Date.now() - frame;
    frame     = Date.now();
    maths();

    context.clearRect(0,0,canvas.width,canvas.height);

    context.beginPath();
    context.arc(canvas.width/2, canvas.height/2, 100, circle.startAngle * Math.PI, circle.curAngle * Math.PI,false);
    context.lineWidth = 2;
    context.strokeStyle = 'blue';
    context.stroke();

    setTimeout(draw,1);

}

frames = Date.now();
draw();

＆＃13;

$(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;
       });
    });

＆＃13;

Answer 3

＆＃13;

$(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();
});

＆＃13;

建议使用角形

Answer 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

停用<a class="" button="" if="" input="" fields="" empty=""

4 个答案: