Question

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

当勾选复选框时，我希望keyup()功能处于活动状态，否则我希望click()功能在未勾选复选框时处于活动状态。但是我把它的工作稍微接近了，当我检查时，它可以正常工作但是当我取消选中它仍然使用键盘然后点击...

如果有人能帮助我，我会很感激！

我的代码：

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

Answer 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之外的其他内容。）

Answer 2

此链接（// jsfiddle.net/chayanyc/KdcJY/101/）可能对您有所帮助。

Answer 3

为什么不直接绑定这两个事件并稍后检查复选框

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

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

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

Answer 4

您在代码中所做的是注册事件监听器;不要解雇那个实际的代码。代码中没有任何内容可以在侦听器不再处于活动状态时取消注册。虽然你可以这样做，但仍然可能只是将侦听器绑定一次，并在处理程序中添加检查：

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

Answer 5

这是我的解决方案。尽量避免使用内联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();
});

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

Answer 6

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

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写道时，您可以简单地将检查添加到处理程序中。

如果选中，则如何使一个功能起作用，如果未选中复选框，则另一个功能如何

6 个答案: