防止更新中的複選框prop「checked」

-1

如何防止<input type="checkbox">元素的.checked屬性發生更改？防止更新中的複選框prop「checked」

jsFiddle
我希望這段代碼是單擊該複選框時提醒false，但它提醒true。

var $elem = $('input'); 

function handleToggle(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 

    alert(event.target.checked); 
} 

$elem.bind('change click', handleToggle);

來源

2015-02-06 rojobuffalo

請始終包含問題本身的代碼... – 2015-02-06 20:23:40

您沒有注意到該複選框未被檢查嗎？如果您知道您要防止默認操作，那麼您知道'！checked'是該屬性在事件處理時將具有的值。 – 2015-02-06 20:25:14

它不會改變我。 – j08691 2015-02-06 20:26:07

看來你對preventDefault有什麼錯誤的期望。它只是sets a flag，以便事件處理引擎知道要做什麼後事件處理程序已處理。

如果cancelable屬性值爲true，那麼preventDefault（）方法必須設置取消標誌。

如何處理該事件是explained here：

運行預單擊該元素的激活步驟。

在元素處點擊單擊事件。 [...]

如果此點擊事件未取消，請對元素執行點擊後激活步驟。

如果該事件被取消，則用戶代理必須在該元素上運行已取消的激活步驟。

This is the specification of what happens when a checkbox is clicked：

如果元素是可變的，那麼：pre-click activation steps由設置的元件的checkedness到其相對值（即真實如果是假的，如果其爲真），並將元素的不確定IDL屬性設置爲false。 canceled activation steps由將檢查和元素的不確定IDL屬性設置回它們在執行預點擊激活步驟之前具有的值組成。

因此，您會發現元素的checked屬性在事件處理程序執行前設置爲相反的值，並且只有在事件被取消時才設置爲原始值。但該程序在事件處理程序後運行。

：這似乎是沒有經過當前的事件處理本身，而是應該所有事件處理程序被執行。

來源

2015-02-06 20:48:42

是否似乎違反直觀地觸發「checked」事件，它會更新DOM，而不是提供防止它的方法？在執行流程中，我肯定會期望'preventDefault'後面的內容反映已取消的激活。在其他使用'preventDefault'的情況下，下面的行反映了取消的行爲。 – rojobuffalo 2015-02-06 20:59:54

@rblakeley：另一個案例的例子是什麼？我只是信使。如果你不喜歡這種行爲，你必須把它寫給那些編寫規範的人。 – 2015-02-06 21:01:10

@ FelixKing：感謝您的關注和研究。我對你一點都不感到沮喪。但是你提倡這種行爲嗎？我一直都明白'preventDefault'在執行流程中立即生效。但是也許我一直在盲目地在射擊場中行走而沒有被擊中。 – rojobuffalo 2015-02-06 21:15:21

-1

在HTML中，只需向輸入元素添加「禁用」即可。

來源

2015-02-06 20:26:40 eszeikial

當檢查的屬性狀態已經更改爲true時，將調用該事件。如果您想始終將複選框標記爲false，則必須添加條件。雖然我沒有看到這樣做的感覺。

var $checkbox = $('input[type="checkbox"]'); 

function handleToggle(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    if(event.target.checked === true) { 
     event.target.checked = false; 
    } 
    alert(event.target.checked); 
} 

$checkbox.bind('change click', handleToggle);

乾杯！

來源

2015-02-06 20:30:30 jcamejo

重點是我想在做'checked'屬性改變之前做一些其他的事情。它需要雙向工作：選中 - >未選中，未選中 - >選中。我的目標是防止默認行爲，做東西，然後更新'checked'屬性 – rojobuffalo 2015-02-06 20:37:19

您可以從相反的角度看到這個問題，當更改事件將選中的值交換爲true時，可以假設之前的狀態是錯誤的，反之亦然。最後，您可以實現您的邏輯，並按照您希望的方式保留checked屬性的狀態。 – jcamejo 2015-02-06 20:51:54

@rblakeley：如果你知道事件被阻止，那麼你知道'！checked'是複選框*將*具有的值。沒有看到問題在這裏？ – 2015-02-06 20:55:59

防止更新中的複選框prop「checked」

回答

相關問題