1

При переходе на jQuery перестала работать отмена выделения радиокнопки, если нажимается другая. Выделяться должна только одна кнопка.

У радиокнопки в каждой строке - генерируются уникальные имена.

Ранее (когда таблица передавалась на клиента, как полностью html), эта функция работала.

Теперь, когда таблица рисуется с помощью jQuery. а данные получаются из ajax-запроса, функция выделения только одной кнопки - перестала работать.

/* выбирается только один checkbox или radio-кнопка*/
$(function() {
  $("table input:radio, table input:checkbox").click(function() {
    if ($(this).data('flag') === false) {
      $('table input:radio, table input:checkbox').prop('checked',
        false).data('flag', false);
      $(this).prop('checked', true).data('flag', true);
    } else {
      $(this).prop('checked', false).data('flag', false);
    }
  });
});

function addEmploye(employe) {
  var employeList = $("#table_list").find("tbody:last");

  var idCol = "<td>" + employe.id + "</td>";
  var emailCol = "<td>" + employe.email + "</td>";
  var passwordCol = "<td>" + employe.password + "</td>";
  var salaryCol = "<td>" + employe.salary + "</td>";

  var btn = "<input type='radio' name='myRadio_" + employe.id + "'      

  id = 'myRadio_" + employe.id + "' > ";

  var inputRadio = "<input class='radioClass' type='radio' name=" +
    employe.id + " data-flag=\"false\"/>";
  var iTag = "<i></i>";
  var labelForRadioLeft = "<label 


  onMouseDown = \"this.firstElementChild.isChecked=this.firstElementChild.
  checked;\
  "" +

  "onClick=\"this.firstElementChild.checked=!this.firstElementChild.
  isChecked;\
  ">";
  var labelForRadioRight = "</label>";
  var radio = "<td><div class='editClass'>" + labelForRadioLeft +
    inputRadio + iTag + labelForRadioRight +
    "</label></div></td>";

  var actionCol = "<td>" + btn + "</td>";

  var employeRow = "<tr>" + idCol + emailCol + passwordCol + salaryCol +
    /*actionCol*/
    radio + "</tr>";

  employeList.append(employeRow);
}
/* обозначаем блок - флексом,
и указываем, что элементы внутри блока,
должны распологаться по центру.
*/

.editClass {
  display: flex;
  justify-content: center;
}


/* Свойство display отвечает за вывод и 
визуальное отображение элементов на странице.
Так как любой html-элемент генерирует на веб-странице
прямоугольный контейнер, укажем, что элемент не генерирует 
никакой контейнер, полностью удаляясь со страницы.
*/

.radioClass {
  vertical-align: top;
  /* управляет вертикальным выравниванием 
  строчных элементов и содержимого ячеек таблицы.*/
  width: 15px;
  height: 15px;
  display: none;
  /* элемент с "видом по умолчанию", исключается 
  из общего потока, он не отображается на экране
  и под него не резервируется место на странице*/
}


/* рисуем радио-кнопку */

i {
  display: inline-block;
  /* Элемент генерирует строковый блок. */
  width: 20px;
  /* размеры */
  height: 20px;
  border: 1px solid #000;
  border-radius: 50%;
  /* получаем круглый элемент */
  position: relative;
  cursor: pointer;
}


/* вид элемента до и после включения */

i:after,
i:before {
  content: '';
  width: 100%;
  /* заполенение элемента на 100 % */
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform .5s;
  /* transition применяется для плавного изменения
  вида элемента при наведении на него курсора */
  border-radius: 50%;
}


/* цвет после нажатия */

i:after {
  background: green;
}


/* цвет перед нажатием */

i:before {
  background: #FFFF66;
}


/* поведение изменения цвета кнопки после того,
 как было снято выделение данной кнопки */

.radioClass:not(:checked)+i:after {
  transform: scale(0);
  /* для горизонтального масштабирования и для вертикального,
  0 - checkbox - постепенно теряет цвет и становится внутри с
  обычным фоном */
}


/* поведение изменения цвета кнопки после 
того, как была выделена данная кнопка */

.radioClass:checked+i:after {
  transform: scale(1);
  /* checkbox - заполняется цветом */
}


/* для скрипта, который фокусируется на последней странице в столбце. */

.changeColor {
  border: 3px solid red;
}


/* информационное сообщение на странице редактирования */

.choice {
  padding-top: 25px;
  padding-left: 25px;
  padding-bottom: 25px;
  color: red;
  font-size: 15px;
}
<h1>Список сотрудников</h1>
<table id="table_list">
  <tr>
    <th>ID</th>
    <th>Email</th>
    <th>Пароль</th>
    <th>Заработная плата</th>
    <th>Операции</th>
  </tr>
  <tbody id="table_body">
  </tbody>
</table>

введите сюда описание изображения


Чтобы можно было выбрать только одну радио кнопку из группы у них должен быть одинаковый name

Внимательно прочитайте вопрос. Кнопки должны быть уникальными, если вас смущает слово радиокнопка, то там может быть checkbox

Есть функция которая ранее работала на обычной html, которая позоволяла даже при уникальных именах, выбрать только одну радиокнопку.

Теперь данная функция сломалась.

1
  • 2
    Чтобы можно было выбрать только одну радио кнопку из группы у них должен быть одинаковый name
    – yolosora
    11 ноя 2018 в 12:26

1 ответ 1

0

данные получаются из ajax-запроса

Хрестоматийный случай. Когда назначается обработчик click, кнопок на странице еще нет, и выборка $("table input:radio, table input:checkbox") - пустая.

Делегирование обработки события:

$("table").on("click", "input:radio, input:checkbox", function() {
  if ($(this).data('flag') === false) {
    $(this).closest('table').find('input:radio, input:checkbox').
      prop('checked', false).data('flag', false);
    $(this).prop('checked', true).data('flag', true);
  } else {
    $(this).prop('checked', false).data('flag', false);
  }
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.