ExtJS：禁用复选框在标签单击时切换

Question

I am designing a checkbox for a for and I absolutely cannot have the checkbox to toggle when the user clicks on its label, as this label contains a link to open a small infobox where the user gets to know what he or she is accepting by selecting the checkbox.

How can I disable checkbox toggle when clicking on its label?

The code looks simply like this (this element is inside a FormPanel items list:)

{ xtype:'checkbox', id: 'privacyCheck', fieldLabel: 'I have read, understood and accepted the privacy policy of ABCDE' }

Answer 1

Instead of using the boxLabel property or field label on the checkbox, create a separate label object next to the checkbox. This should make it easier to manipulate your handler for the label. Otherwise, you will need to dig through the appropriate DOM element for the boxLabel (not pretty) to get at it.

Answer 2

I know, this topic is rather old, but I found it, searching for a solution to the exact same problem. So I'd like to share.

I needed to modify the browsers behaviour to mimick the behaviour of a legacy site, while making said site "accessible". (The for-attribute of the label tag is needed and a label without a for-attribute can not be used.)

I don't know about ExtJS, but since the legacy site uses jQuery in the frontend, I solved the problem this way:

//[...]
$(document).ready(function () {
    $('.donotToogleCheckbox').click(function (event) {       
        event.preventDefault();
        // do other stuff like displaying a dialog or something
    })
});
//[...]
<label class='donotToogleCheckbox' for='myCheckbox'>DaLabel</label>
<input id='myCheckbox' name='myCheckbox' type="checkbox">
//[...]