防止复选框单击激活下拉菜单答案

【问题标题】：Prevent Checkbox click from activating drop down防止复选框单击激活下拉菜单
【发布时间】：2012-10-05 16:08:42
【问题描述】：

我正在处理一个动态表，其中第一列/左列中有 2 个复选框，下一个 td 是程序名称和日期，php 循环遍历所有可用程序。

当用户点击一行时，更多信息会通过 jQuery 插件下拉。

现在，当您单击复选框时，下拉菜单被激活，这不是我需要它做的。

单击复选框时如何停止下拉行？

这一切都来自 jExpand 插件：jExpand

头部脚本：

<script type="text/javascript">
  $(document).ready(function(){
     $("#report tr:odd").addClass("odd");
     $("#report tr:not(.odd)").hide();
     $("#report tr:first-child").show();

     $("#report tr.odd").click(function(){
         $(this).next("tr").toggle();
         $(this).find(".arrow").toggleClass("up");
     });
     //$("#report").jExpand();
 });
 </script>

文件中的脚本：

(function($){
$.fn.jExpand = function(){
    var element = this;

    $(element).find("tr:odd").addClass("odd");
    $(element).find("tr:not(.odd)").hide();
    $(element).find("tr:first-child").show();

    $(element).find("tr.odd").click(function() {
        $(this).next("tr").toggle();
    });

}    
});

HTML：

<table id="report">
    <tr>
        <th>Master/Registration</th>
        <th></th>
        <th>Program Name</th>
        <th></th>
        <th>Date</th>
        <th></th>
    </tr>
    <?php do { ?>
    <tr>
        <td><input name="pid[]" type="checkbox" class="eventCodeCheck" value="<?php echo $row_programs['{table-column}']; ?>" />
            <input name="pid[]" type="checkbox" class="eventCodeCheck" value="<?php echo $row_programs['{table-column}']; ?>" />
        </td>
        <td></td>
        <td><?php echo $row_programs['{table-column}']; ?></td>
        <td></td>
        <td><?php echo $row_programs['format_date']; ?></td>
        <td><div class="arrow"></div></td>
    </tr>
    <tr>
        <td colspan="5">
            <h4>Additional information</h4>
            <ul>
                <li>Info</li>
                <li>Info</li>
                <li>Info</li>
             </ul>   
        </td>
    </tr>

    <?php } while ($query = mysql_fetch_assoc($xxxxxxx)); ?>
    </table>

【问题讨论】：

尝试捕获事件：$('input[type="checkbox"]').click(function(e) { e.stopPropagation(); });
你没有说你想要什么，只是你不想要什么。要停止扩展（这似乎与单击奇数行上的任意位置有关，而不是复选框），您需要做的就是从您的 ready 函数以及 jExpand 函数中删除 click 处理程序。我怀疑这就是你想要的，所以你需要提供更多细节。
搅拌机，你的建议很有效！
我在 $( document).ready(function(){。复选框是可点击的，不会激活表格其余部分的下拉菜单。对不起，如果我遗漏了任何有用的信息。我的目标是在一张桌子上有两个复选框行，该行是可点击的，并且下拉显示更多信息。正如我所拥有的，激活一个复选框，也会激活下拉。当然这永远不会起作用。谢谢大家的帮助和时间。

标签： php jquery html checkbox html-table

【解决方案1】：

$("#report tr.odd").click(function(e){
     if( e.target.type.toLowerCase() == 'checkbox') { 
     }
     else{  
       $(this).next("tr").toggle();
       $(this).find(".arrow").toggleClass("up");
     }
});

【讨论】：

【解决方案2】：

当复选框被点击时，你需要stop the propagation一个事件：

$('input.eventCodeCheck').click(function(e) {
    e.stopPropagation();
});

【讨论】：

使用 $('input[type="checkbox"]') 代替 eventCodeCheck 效果很好。