单击复选框时如何禁用页面重定向？

Question

I have this code:

<div onClick="$(location).attr('href','updateUser.php?id=<?php echo $admin->id; ?>')" class="dbItem">
                <div class="dbItemCheckbox">
                  <input name="se8" type="checkbox" value="<?php echo $admin->id; ?>" />
                </div>
                <div class="dbItemMessageIconAdmin"><img src="images/admin.png" alt="" width="20" height="23" border="0" /></div>
                <div class="dpItemName"><?php echo $admin->username; ?></div>
                <div class="dpItemTitle"><?php echo $te; ?></div>
                <div style="left: 110px" class="dpItemDate"><?php echo $admin->registerDate; ?></div>
                <div class="dpItemDelete"><a href="editUsers.php?del=<?php echo $admin->id; ?>"><img src="images/delete.png" alt="" width="11" height="10" border="0" /></a></div>
              </div>

When user click on the DIV, the browser go to the update page.

The problem that I am facing is when the user clicks the checkbox to check for multi delete this will also go to the update page.

How I can disable this when the user click only on the checkbox.

Answer 1

Prevent the bubbling of the event on the checkbox. Try something like this:

$(".dbItem INPUT[type='checkbox']").click(function(evt) {
    evt.stopPropagation();
});

Answer 2

easiest way I can see to do this would be to relocate the onclick to another div that is exclusively wrapped around everything but the checkbox. like this:

<div class="dbItem">
  <div class="dbItemCheckbox">
    <input name="se8" type="checkbox" value="<?php echo $admin->id; ?>" />
  </div>
  <div onClick="$(location).attr('href','updateUser.php?id=<?php echo $admin->id; ?>')" >
    <div class="dbItemMessageIconAdmin"><img src="images/admin.png" alt="" width="20" height="23" border="0" /></div>
    <div class="dpItemName"><?php echo $admin->username; ?></div>
    <div class="dpItemTitle"><?php echo $te; ?></div>
    <div style="left: 110px" class="dpItemDate"><?php echo $admin->registerDate; ?></div>
    <div class="dpItemDelete"><a href="editUsers.php?del=<?php echo $admin->id; ?>"><img src="images/delete.png" alt="" width="11" height="10" border="0" /></a></div>
  </div>
</div>

Answer 3

Either in the checkbox's onclick attribute, a script section (or external javascript file) you want to include an onclick handler for the checkbox.

$('input[name="se8"]').click(function(e){
    e.stopPropagation();
});