Не устанавливается checked

150

11 марта 2019, 10:50

есть разметка:

<div id="bron-1417" class="brons color-status-2" data-brone="1417">
    <div class="width_60proc padding_5px tool-1417">
        <p>Dr. Camscope DCS-103R видеоректоскоп</p>
    </div>
    <div class="width_30proc padding_5px tool-1417 status-2">
        <p>Авторизовано</p>
    </div>
    <div class="width_4proc padding_5px tool-1417 status-2">
        <p><input type="checkbox" id="chech_bron-1417" class="chech_bron"></p>
    </div>
</div>

При клике по div#bron-1417 прекрасно устанавливается checked в input, но при клике на сам input не ставится, почему?

var id, check;
$('.brons').on('click',function(event){
    event.preventDefault();
    id=$(this).attr('data-brone');
    check=$('#chech_bron-'+id).prop('checked');
    $('#chech_bron-'+id).prop('checked', !check);
});

Answer 1

Скрипт не нужен:

<div id="bron-1417" class="brons color-status-2" data-brone="1417"> 
  <label> 
    <div class="width_60proc padding_5px tool-1417"> 
    	<p>Dr. Camscope DCS-103R видеоректоскоп</p> 
    </div> 
    <div class="width_30proc padding_5px tool-1417 status-2"> 
      <p>Авторизовано</p> 
    </div> 
    <div class="width_4proc padding_5px tool-1417 status-2"> 
      <p><input type="checkbox" id="chech_bron-1417" class="chech_bron"></p> 
    </div> 
  </label> 
</div>

или

<div id="bron-1417" class="brons color-status-2" data-brone="1417"> 
  <div class="width_60proc padding_5px tool-1417"> 
    <label for="chech_bron-1417"><p>Dr. Camscope DCS-103R видеоректоскоп</p></label> 
  </div> 
  <div class="width_30proc padding_5px tool-1417 status-2"> 
    <label for="chech_bron-1417"><p>Авторизовано</p></label> 
  </div> 
  <div class="width_4proc padding_5px tool-1417 status-2"> 
    <p><input type="checkbox" id="chech_bron-1417" class="chech_bron"></p> 
  </div> 
</div>

Answer 2

Не работает потому, что Вы сразу же меняете checked, т.к. у Вас стоит событие на родителе (.brons). Проверяйте event.target.

$('.brons').on('click', function(event) { 
  if (event.target.id != 'chech_bron-1417') { 
    event.preventDefault(); 
    id = $(this).attr('data-brone'); 
    check = $('#chech_bron-' + id).prop('checked'); 
    $('#chech_bron-' + id).prop('checked', !check); 
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="bron-1417" class="brons color-status-2" data-brone="1417"> 
  <div class="width_60proc padding_5px tool-1417"> 
    <p>Dr. Camscope DCS-103R видеоректоскоп</p> 
  </div> 
  <div class="width_30proc padding_5px tool-1417 status-2"> 
    <p>Авторизовано</p> 
  </div> 
  <div class="width_4proc padding_5px tool-1417 status-2"> 
    <p><input type="checkbox" id="chech_bron-1417" class="chech_bron"></p> 
  </div> 
</div>