用DIV遮罩解决checkbox勾选无效的问题

在前端开发的过程中,遇到一种情况,需要勾选,为了用户的操作便捷就将click事件放到了DIV上。(其中使用了knockout.js)

代码大概如下:

<div id="one" data-biind="click:clickevent">
    <input type="checkbox"><span>有事请勾我</span>
</div>

但是这样写出现了一个奇怪的现象,鼠标点击div一切正常。

但鼠标直接勾选checkbox不正常:

checkbox处于未勾选状态,鼠标直接点击checkbox勾选,此时应该实现是:1、执行div的clickevent事件;2、事件执行完毕后,checkbox处于勾选状态。

但最终的结果却是,checkbox仍然处于未勾选状态。

跟踪调试结果是,在执行完clickevent事件时,checkbox还是处于勾选状态,但clickevent执行完后,接着进入jquery的代码执行,走了两三步后,checkbox即被改成未选中状态。

原因至今未查到。(另外一个地方使用的radiobox也有类似的情况)

没办法,只能变通一下,通过在checkbox上面覆盖一层div,让鼠标点击的时候点的是div而不是checkbox,通过clickevent改变checkbox状态(clickevent事件中本来就有改变checkbox状态的代码)

实现如下:

<div id="one">
    <div id="two" data-bind="click:clickevent"></div>
    <div id="three">
        <input type="checkbox"/> <span>有事请勾我</span>
    </div>
</div>

ID为two和three的两个div,设置时关键是需要设置两个属性:position:absolute; z-index:1;

其中上面那层的div的z-index属性要比在下面那层的div大。

以上DIV的ID属性只是为了说明,一般程序中使用class属性设置。

用DIV遮罩解决checkbox勾选无效的问题

时间: 2024-11-03 21:40:27

用DIV遮罩解决checkbox勾选无效的问题的相关文章

jquery checkbox勾选/取消勾选的诡异问题

<form> 你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br /> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" v

jquery checkbox勾选取消勾选的诡异问题

jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题 <form>        你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br />        <input type="checkbox" name="items" value="足球"

asp.net 翻页时用ViewState保存上一页checkbox勾选的值

/// <summary>        /// checkbox勾选取消勾选事件        /// </summary>        /// <param name="sender"></param>        /// <param name="e"></param>        protected void checkboxl_OnCheckedChanged(Object se

4,Checkbox 勾选操作

-----后台  using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; using System.Text; public partial class _Default : System.Web.UI.Page {     protect

解决RaycastTarget勾选过多的烦恼

看过UGUI源码的朋友一定都知道,UI事件会在EventSystem在Update的Process触发.UGUI会遍历屏幕中所有RaycastTarget是true的UI,接着就会发射线,并且排序找到玩家最先触发的那个UI,在抛出事件给逻辑层去响应. 团队多人在开发游戏界面,很多时候都是复制黏贴,比如上一个图片是需要响应RaycastTarget,然后ctrl+d以后复制出来的也就带了这个属性,很可能新复制出来的图片是不需要响应的,开发人员又没有取消勾选掉,这就出问题了. 所以RaycastTa

TreeView CheckBox勾选联动

在C# Winform项目中用到了TreeView控件,并且需要勾选的功能.父子节点联动,需要实现如下: 1.当选中父节点的时候,如果它的子节点有没有选中的,则选中. 2.当取消选中父节点的时候,将所有子节点都取消选中. 3.当选中子节点的时候,要判断它的父节点中的所有子节点,是不是都已经选中,如果都选中则选中父节点. 4.当取消子节点的时候,要判断父节点是否已经被勾选上,如果勾选上则取消选中父节点. 注意:所有的节点都有可能既是父节点,又是子节点.举例:当效果3满足时,选中了父节点,那么这个父

jquery checkbox勾选/取消勾选的问题

<form>         你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br />         <input type="checkbox" name="items" value="足球" />足球                 <input type="checkbo

jquery checkbox勾选/取消

作者:@keenleung本文为作者原创,转载请注明出处:http://www.cnblogs.com/KeenLeung/p/3799895.html 目录 <form> 你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br /> <input type="checkbox" name="items" value=&qu

jquery checkbox勾选/取消勾选只能操作一次的诡异问题

第一次执行,没问题,但第二次执行就有问题了,选择不了 解决办法:把attr()换成prop() $("#CheckedAll").click(function () { if ($(this).is(":checked")) { $("[name=items]:checkbox").prop("checked", true); } else { $("[name=items]:checkbox").prop