Use DIV mask to solve the problem of invalid checkbox directly selected by mouse_HTML/Xhtml_Web page production

During the front-end development process, I encountered a situation that required checking. For the convenience of user operations, the click event was placed on the DIV. (Knockout.js is used)

The code is roughly as follows:

Copy code

The code is as follows:

Please check me if you have any questions< ;/span>

But there is a strange phenomenon when writing like this. Clicking the div with the mouse works fine.

But it is not normal to directly check the checkbox with the mouse:

The checkbox is in an unchecked state, and the checkbox is checked by clicking the mouse directly. At this time, the following should be achieved: 1. Execute the clickevent event of the div; 2. , after the event is executed, the checkbox is in the checked state.

But the final result is that the checkbox is still unchecked.

The tracking debugging result is that when the clickevent event is executed, the checkbox is still in the checked state, but after the clickevent is executed, the jquery code execution is entered. After two or three steps, the checkbox is changed to Unselected state.

The reason has not yet been found. (The radiobox used in another place has a similar situation)

There is no other way but to work around it. By covering the checkbox with a layer of div, so that when the mouse clicks, the div is clicked instead of the checkbox. Through clickevent Change the checkbox status (there is code to change the checkbox status in the clickevent event)

is implemented as follows:

Copy code

The code is as follows:

Please tick me if you have any questions

> ;

Two divs with IDs two and three. The key to setting them is to set two attributes: position:absolute; z-index:1;

The z-index attribute of the div on the upper layer is larger than the div on the lower layer.

The ID attribute of the above DIV is just for illustration. Generally, the class attribute is used in the program.