Ошибка с jQuery вкладками и переключателем

Question

Ошибка при выборе пользователем переключателя на второй или третьей вкладках (jquery -ui). Радиокнопка в той же позиции на первых вкладках выбирается вместо реальной выбранной радиокнопки.

https://jsfiddle.net/qy58n2zc/

Есть ли решение?

$(function() {
  $("#tabs").tabs();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">First (OK)</a></li>
    <li><a href="#tabs-2">Second (bug)</a></li>
    <li><a href="#tabs-3">Third (bug)</a></li>
  </ul>

  <div id="tabs-1">
    <label for="male">Male</label>
    <input type="radio" name="gender" id="male" value="male"><br>
    <label for="female">Female</label>
    <input type="radio" name="gender" id="female" value="female"><br>
    <label for="other">Other</label>
    <input type="radio" name="gender" id="other" value="other"><br>
  </div>

  <div id="tabs-2">
    <label for="male">Male</label>
    <input type="radio" name="gender" id="male" value="male"><br>
    <label for="female">Female</label>
    <input type="radio" name="gender" id="female" value="female"><br>
    <label for="other">Other</label>
    <input type="radio" name="gender" id="other" value="other"><br>
  </div>

  <div id="tabs-3">
    <label for="male">Male</label>
    <input type="radio" name="gender" id="male" value="male"><br>
    <label for="female">Female</label>
    <input type="radio" name="gender" id="female" value="female"><br>
    <label for="other">Other</label>
    <input type="radio" name="gender" id="other" value="other"><br>
  </div>

Answer 1

Вы должны изменить имя входа, чтобы сгруппировать его. Вы можете попробовать что-то вроде этого.

$(function() {
  $("#tabs").tabs();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">First (OK)</a></li>
    <li><a href="#tabs-2">Second (OK)</a></li>
    <li><a href="#tabs-3">Third (OKKKK)</a></li>
  </ul>

  <div id="tabs-1">
    <label for="male">Male</label>
    <input type="radio" name="gender[1]" id="male" value="male"><br>
    <label for="female">Female</label>
    <input type="radio" name="gender[1]" id="female" value="female"><br>
    <label for="other">Other</label>
    <input type="radio" name="gender[1]" id="other" value="other"><br>
  </div>

  <div id="tabs-2">
    <label for="male">Male</label>
    <input type="radio" name="gender[2]" id="male" value="male"><br>
    <label for="female">Female</label>
    <input type="radio" name="gender[2]" id="female" value="female"><br>
    <label for="other">Other</label>
    <input type="radio" name="gender[2]" id="other" value="other"><br>
  </div>

  <div id="tabs-3">
    <label for="male">Male</label>
    <input type="radio" name="gender[3]" id="male" value="male"><br>
    <label for="female">Female</label>
    <input type="radio" name="gender[3]" id="female" value="female"><br>
    <label for="other">Other</label>
    <input type="radio" name="gender[3]" id="other" value="other"><br>
  </div>