jQuery 选项卡和单选按钮的错误

Question

当用户 select 在第二个或第三个选项卡 (jquery-ui) 上单击单选按钮时存在错误。第一个选项卡中相同位置的单选按钮是 selected 而不是真正的 selected 单选按钮。

有解决办法吗？

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

jQuery 选项卡和单选按钮的错误

Bug with jQuery tabs and radio button

jquery

tabs

jquery-ui

radio-button