如何使一個函數的工作，如果檢查和其他工作，如果不使用複選框

Question

檢查所以我硬是失望在我心裏，我一直在試圖解決這一問題約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; 
    }); 
    } 
} 

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和我打掃塞萊ctors（當您通過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寫道，您可能只需將支票添加到處理程序。