我知道我可以在複選框上添加一個click
或change
偵聽器。當複選框未選中時,處理程序將按鈕的disabled
prop
更改爲true
。這很容易。任何方式來創建「狀態」偵聽器而不是「事件」偵聽器?
但是,這不是事件驅動的,有沒有辦法讓這是「狀態」驅動?
如果取消選中複選框的「狀態」,則該按鈕的「狀態」將始終處於禁用狀態。什麼樣的事件觸發狀態改變並不重要。如果複選框處於一種狀態,則該按鈕始終處於相應的狀態。而已。
下面是標準事件驅動代碼的示例,其中只要未選中條款和條件複選框,就應禁用結帳按鈕。
$('input[name="terms-and-conditons"]').change(function(e, tmpl){
if(e.target.checked === true){
$('#checkout-button').prop("disabled", false);
} else {
$('#checkout-button').prop("disabled", true);
};
});
不幸的是,這並沒有考慮到初始狀態,因爲它需要事件發生才能發生。在頁面加載,如果該複選框被選中時,按鈕仍然可以啓用,除非小心地記得按鈕的初始狀態設置爲禁用:
// setting the initial state
$('#checkout-button').prop("disabled", true);
$('input[name="terms-and-conditons"]').prop("checked", false);
$('input[name="terms-and-conditons"]').change(function(e, tmpl){
if(e.target.checked === true){
$('#checkout-button').prop("disabled", false);
} else {
$('#checkout-button').prop("disabled", true);
};
});
我不知道是否有一種方法創造一個「國家聽衆」。無論發生什麼事件(即使沒有事件,如頁面加載的默認值),按鈕狀態將始終與複選框狀態保持一致。它可以通過單擊,空格按鍵,更改事件,只需在Chrome控制檯中直接編輯HTML的人員進行更改,或者它可能剛剛以某種狀態加載。關鍵是,只是的東西是。而某些事物的狀態會隨着其他事物的狀態而自動改變。
有沒有這樣的功能,你要求內置到瀏覽器。您必須通過觀察所有可能的事件來指明相關狀態的變化,從而通過自己的JS實現它。 – jfriend00
這就是我一直在做的事情。所以解決方案實際上只是爲單個ID或類複選框註冊一大堆事件偵聽器和處理程序,並希望您沒有忘記解釋某個事件? – fuzzybabybunny
在現代瀏覽器中,特定屬性上的[MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)可能是更通用的更改偵聽器嗎? – jfriend00