CODEWITHSUNDEEP
javascriptjqueryhtmlcsscheckbox
Jibeji
Jibeji

Reputation: 473

Check checkbox on clicking a div, but not on an image

I would like a checkbox to be checked on clicking anywhere on a parent div, but not if the user clicks on the camera image included in that div. How to "exclude" that div?

jQuery(function($) {
   $("input:checkbox").on("change", function() {
      $(this).closest(".colorChange").toggleClass("checked_bg", $(this).prop("checked"));
   });
});
.checked_bg {
  background-color: #f00
}
div {
  border: 1px solid #000000;
} 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="checkbox_296501" class="label-for-check">
   <div class="colorChange">
      <div>
         Title          
         <div style="float: right">
            <input type="checkbox" id="checkbox_296501" name="Box[]" value="296501" style="/*display: none*/" >
         </div>
      </div>

      <div style="float: left; padding: 6px 6px 0 0">
         <img class="photo_dispo" src="https://cdn.icon-icons.com/icons2/510/PNG/512/camera_icon-icons.com_50440.png" data-no="296501" style="width: 30px; cursor: zoom-in">
      </div>

      <p style="clear: both; margin-bottom: 0">
         Pellentesque sit amet placerat magna. Vestibulum diam quam, vestibulum vel eros vitae, rhoncus aliquet diam. Sed tortor risus, varius interdum ornare non, sagittis eu neque. Nunc vulputate nunc lorem, at rhoncus nisi eleifend a.
      </p>

      <div>
         <div>
            Left column
         </div>
         <div style="float: right">
            Right column
         </div>
      </div>
   </div>
</label>

Upvotes: 2

Views: 115

Answers (2)

Ahsan Azwar
Ahsan Azwar

Reputation: 328

The checkbox is changing on label click remove the label div and insert the label div after image div like following

 <div class="colorChange">
  <div>
     Title          
     <div style="float: right">
        <input type="checkbox" id="checkbox_296501" name="Box[]" value="296501" style="/*display: none*/" >
     </div>
  </div>

  <div style="float: left; padding: 6px 6px 0 0">
     <img src="https://cdn.icon-icons.com/icons2/510/PNG/512/camera_icon-icons.com_50440.png" data-no="296501" style="width: 30px; cursor: zoom-in">
  </div>
  <label for="checkbox_296501" class="label-for-check">
  <p style="clear: both; margin-bottom: 0">
  Pellentesque sit amet placerat magna. Vestibulum diam quam, 
  vestibulum vel eros vitae, rhoncus aliquet diam. Sed tortor 
  risus, varius interdum ornare non, sagittis eu neque. Nunc 
  vulputate nunc lorem, at rhoncus nisi eleifend a. Sed sit 
  amet fermentum dolor. Sed et commodo ex, at sodales lorem. 
  Cras facilisis urna non sem vestibulum sollicitudin. 
  Maecenas dictum porta rutrum. Integer a blandit nisl. 
  Curabitur blandit, justo in facilisis interdum, ante sapien 
  euismod urna, nec lobortis nunc tellus et elit. Cras 
  ultrices in nisl a efficitur. Proin varius, velit nec 
  condimentum congue, urna sapien fringilla massa, a commodo 
  eros massa et enim. Nulla convallis nisi quis lacus rhoncus 
  ultricies.
  </p>

  <div>
     <div>
        Left column
     </div>
     <div style="float: right">
        Right column
     </div>
  </div>
  </label>

Just update the html code with above code and enjoy :)

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

The problem comes from the label that shouldn't nest the divs and paragraphs p.

Replace the label with a div to take the control from your JS code and validate your HTML structure, then check if the clicked element isn't an img tag or the container of the image :

jQuery(function($) {
  $(".colorChange").on("click", function(e) {
    if (e.target.getAttribute('class') === 'img_container' || e.target.tagName === 'IMG') {
      return;
    } else {
      var checkbox = $("input:checkbox", this);
      checkbox.prop("checked", !checkbox.prop("checked"));

      $(this).toggleClass("checked_bg", checkbox.prop("checked"));
      $(this).prop("checked");
    }
  });
});
.checked_bg {
  background-color: #f00
}

div {
  border: 1px solid #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="label-for-check">
  <div class="colorChange">
    <div>
      Title
      <div style="float: right">
        <input type="checkbox" id="checkbox_296501" name="Box[]" value="296501" style="/*display: none*/">
      </div>
    </div>

    <div class="img_container" style="float: left; padding: 6px 6px 0 0">
      <img src="https://cdn.icon-icons.com/icons2/510/PNG/512/camera_icon-icons.com_50440.png" data-no="296501" style="width: 30px; cursor: zoom-in">
    </div>

    <p style="clear: both; margin-bottom: 0">
      Pellentesque sit amet placerat magna. Vestibulum diam quam, vestibulum vel eros vitae, rhoncus aliquet diam. Sed tortor risus, varius interdum ornare non, sagittis eu neque. Nunc vulputate nunc lorem, at rhoncus nisi eleifend a. Sed sit amet fermentum
      dolor. Sed et commodo ex, at sodales lorem. Cras facilisis urna non sem vestibulum sollicitudin. Maecenas dictum porta rutrum. Integer a blandit nisl. Curabitur blandit, justo in facilisis interdum, ante sapien euismod urna, nec lobortis nunc tellus
      et elit. Cras ultrices in nisl a efficitur. Proin varius, velit nec condimentum congue, urna sapien fringilla massa, a commodo eros massa et enim. Nulla convallis nisi quis lacus rhoncus ultricies.
    </p>

    <div>
      <div>
        Left column
      </div>
      <div style="float: right">
        Right column
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions