Как активировать input radio после preventDefault?

133

27 октября 2019, 21:40

Добрый вечер уважаемые программисты! Помогите плиз разобраться с input preventDefault. Есть таблица. В ней для примера четыре строки (будет больше). Каждые две строки по смыслу относятся к одной группе. Первый input каждой группы строк имеет имя name="group[new][]" и отправляет данные в массив $group['new']. Второй input каждой группы строк имеет имя name="group[old][]" и отправляет данные в массив $group['old']. Нужно сделать чтобы при клике на одном из input в группе, второй input снимался и остальные input в других строках не менялись, т.к. у них похожие атрибуты name. Если в обработчике события input.onclick поставить event.preventDefault то input'ы с похожим именем не сбрасываются, но текущий input не закрашивается, хотя свойство checked у него стает true после цепочки событий mousedown, mouseup. Понимаю что возможно есть более простое решение, но хотелось бы разобраться почему input'ы после отмены события не закрашиваются и можно ли это как то победить. Спасибо.

$('input[type=radio]').on('mousedown mouseup click change input focus', function (e) { 
        e.preventDefault(); 
        console.log(e.type); 
        console.log($(this).prop('checked')); 
        // после preventDefault <input> уже   не закрашивается 
        $(this).prop('checked', true); 
        // так тоже не закрашивается 
        //setTimeout(function() { 
            //$(this).checked = true; 
        //}, 1); 
         
        /*  
        дальше будет код по снятию checked с 
        соседнего тега <input> такого же класса tr 
        (например, если был активен второй <input> 
        первой группы, затем нажали на первый <input> 
        первой группы, то первый <input> активируется, 
        а второй деактивируется, при это нижние <input> 
        с таким же атрибутом name не должны меняться. 
        */ 
    });

table .group_1 { 
background: #bcd; 
} 
table .group_2 { 
background: #aca; 
} 
table td { 
padding: 10px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<form action="#" method="POST">  
  <table> 
    <tr class="group_1"> 
      <td> 
        <input type="radio" name="group[new][]" value="888"> 
      </td> 
      <td> 
        GroupName 1 
      </td> 
    </tr> 
    <tr class="group_1"> 
      <td> 
        <input type="radio" name="group[old][]" value="111"> 
      </td> 
      <td> 
        GroupName 1 
      </td> 
    </tr> 
    <tr class="group_2"> 
      <td> 
        <input type="radio" name="group[new][]" value="999"> 
      </td> 
      <td> 
        GroupName 2 
      </td> 
    </tr> 
    <tr class="group_2"> 
      <td> 
        <input type="radio" name="group[old][]" value="222"> 
      </td> 
      <td> 
        GroupName 2 
      </td> 
    </tr> 
  </table> 
</form>