0

所以我真的很沮丧，我一直试图解决这个问题大约 30 分钟，但仍然失败。

我希望该keyup()功能在选中复选框时处于活动状态，否则我希望该click()功能在未选中复选框时处于活动状态。但是我让它工作得有点接近，当我检查时，它可以工作，但是当我取消选中它时，它仍然使用 keyup 并单击...

如果有人可以帮助我，我将不胜感激！

我的代码：

HTML：

<input type="checkbox" id="saut" onchange="isChecked()">

JavaScript：

function isChecked() {
  var checked = $('input#saut').is(':checked');
  if (checked == true) {
    $('button#searchbutton').attr("disabled", true);
    $('input#searchquery').keyup(function () {
      alert("omfg keyup!");
      return;
    });
  } else {
    $('button#searchbutton').attr("disabled", false);
    $('button#searchbutton').click(function () {
      alert("omfg button!!");
      return;
    });
  }
}
4

5 回答 5

1

我会这样做：

$('#saut').change(function(){ // let's enable/disable the button on (un)check
    $('#searchbutton').prop("disabled", this.checked);
});
$('#searchquery').keyup(function () {
    if (!$('#saut').is(':checked')) return; // do nothing if not checked
    alert("omfg keyup!");
});
$('#searchbutton').click(function () {
    if ($('#saut').is(':checked')) return; // do nothing if checked
    alert("omfg button!!");
});

另请注意，我使用了prop而不是attr并且我清理了选择器（当您按 ID 选择时，不要在选择器中放置除 ID 之外的任何其他内容）。

于 2013-04-09T14:32:03.623 回答
0

你为什么不只是绑定这两个事件并稍后检查复选框

 $('input#searchquery').keyup(function () {
     if($("#saut").is(":checked")){
          alert("omfg keyup!");
     }
 });

 $('button#searchbutton').click(function () {
     if(!$("#saut").is(":checked")){
         alert("omfg button!!");
     }
 });

您还可以绑定事件然后取消绑定它或使用 jqueryone

于 2013-04-09T14:31:45.950 回答
0

您在代码中所做的是注册一个事件侦听器；不要触发该实际代码。当侦听器不再处于活动状态时，您的代码中没有任何内容会取消注册侦听器。虽然您可以这样做，但只绑定一次侦听器并在处理程序中添加检查可能会更简洁：

function searchKeyup() {
    if(!$('#saut').is(':checked')) { return; }
    // keyup code
}

function searchClick() {
    if($('#saut').is(':checked')) { return; }
    // click code
}

$(function() {
    $('#searchquery').keyup(searchKeyup);
    $('#searchbutton').click(searchClick);
});

由于您还禁用和启用了按钮，因此您还可以执行以下操作：

$('#saut').change(function() {
   var checked = $(this).is(':checked');
   $('#searchbutton').prop('disabled', checked);
   $('#searchquery').toggleClass('disabled', !checked);
});

$(document).on('click', '#searchbutton:not(:disabled)', function() {
   // button click
});

$(document).on('click', '#searchquery:not(.disabled)', function() {
   // keyup
});
于 2013-04-09T14:31:47.813 回答
0

这是我的解决方案。尽量避免使用内联 jQuery 函数调用。它创造了一个你不想处理的问题的整个世界。最好让你的脚本远离 DOM。

http://jsfiddle.net/talymo/hreZH/

function isChecked() {
     var checked = $('input#saut').is(':checked');
     console.log(checked);
     if (checked == true) {
         $('button#searchbutton').attr("disabled", true);
         $('input#searchquery').keyup(function () {
             alert("omfg keyup!");
             return;
         });
     } else {
         $('button#searchbutton').attr("disabled", false);
         $('button#searchbutton').click(function () {
             alert("omfg button!!");
             return;
         });
     }
}

$('input').on('click', function(){
    isChecked();
});

此外，您的代码中似乎没有您的搜索表单，所以我继续将其添加到那里，让它对我很有用。

于 2013-04-09T14:34:08.790 回答
0

如果您想完全使用这种机制，您应该取消订阅不必要的事件。所以你的代码应该是：

function isChecked() {
 var checked = $('input#saut').is(':checked');

 if (checked == true) {
     $('button#searchbutton').attr("disabled", true);
     $('input#searchquery').on("keyup", function () {
         alert("omfg keyup!");
         return;
     });
     $('button#searchbutton').off("click");
 } else {
     $('button#searchbutton').attr("disabled", false);
     $('button#searchbutton').on("click", function () {
         alert("omfg button!!");
         return;
     });
     $('input#searchquery').off("keyup");
 }

所以使用on绑定事件和off取消绑定。或者正如dystroy所写的那样，您可以简单地将检查添加到处理程序中。

于 2013-04-09T14:37:57.027 回答