Установите флажок при нажатии на div, но не на изображение

Question

Я бы хотел, чтобы флажок был отмечен при щелчке в любом месте родительского элемента Div, но не в том случае, если пользователь нажимает на изображение с камеры, включенное в этот элемент Div. Как «исключить» это 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>

Answer 1

Флажок меняется на ярлыке. Нажмите, удалите div метки и вставьте div метки после изображения div, как показано ниже

 <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>

Просто обновите HTML-код указанным выше кодом и наслаждайтесь:)

Answer 2

Проблема связана с меткой, которая не должна вкладывать div s и абзацы p.

Замените метку на div, чтобы взять элемент управления из вашего кода JS и проверить структуру HTML, а затем проверьте, не является ли выбранный элемент тегом img или контейнером изображения:

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>