Question

“引导程序”选项卡窗格具有锚标记作为选项卡控件，而不是选项卡按钮外观，我需要单选按钮。

试图添加标签的单选按钮内容

<div id="tab" class="btn-group" style="width=500px; margin-bottom:20px;">
  <a href="#accept" class="radio " data-toggle="tab" style="float: left; margin-right: 20px; text-decoration: none;">
          <label>
             <input type="radio" value="accept" name="action" /> 
             Accept
          </label>
  </a>

  <a href="#discuss" class="radio" data-toggle="tab" style="float: right; text-decoration: none;">
          <label>
           <input type="radio" value="discuss" name ="action"/>
            Discuss
          </label>
  </a>
</div>

当用户单击单选按钮时，jQuery脚本将触发选项卡的点击，这很好

$("input:radio").click(function(event) {
  $(event.target).parents('a').trigger('click');
  event.stopPropagation();
});

整个代码Js fiddle link

问题

当用户单击“标签”时，标签分别处于选择状态，但单选按钮仍处于先前的选择状态

我尝试解决的方法。 1.添加了CSS pointer-events: none;，这也会影响广播。 2.检查单选按钮的脚本。此操作会调用其他js事件

我需要的。

用户只能单击单选按钮，不能单击标签部分

OR

当用户单击“标签”标签时，检查相应的收音机。

Code Snippet

预先感谢

Answer 1

这是检查无线电的代码。

$("input:radio").click(function() {
                $("#result").html($(this).val());
            });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tab" class="btn-group" style="width=500px; margin-bottom:20px;">
            <a href="#accept" class="radio " data-toggle="tab" style="float: left; margin-right: 20px; text-decoration: none;">
                <label>
                    <input type="radio" value="accept" name="action" />
                    Accept
                </label>
            </a>

            <a href="#discuss" class="radio" data-toggle="tab" style="float: right; text-decoration: none;">
                <label>
                    <input type="radio" value="discuss" name ="action"/>
                    Discuss
                </label>
            </a>
        </div>
        <div id="result"></div>

希望这会有所帮助！

单选按钮作为“选项卡”窗格控件

1 个答案: