JQuery UI - 使用.checkboxradio（）和.tabs（）的不正确的复选框状态图标

Question

当放入标签窗口小部件时，我很难正确呈现选中复选框。

在标签之外，复选框可以正确呈现。

我准备了一个JSFiddle来显示问题：documentation

$( function() {
  $(".checkbox").checkboxradio();
  $("#guestsData").tabs();
});

div {
  margin: 20px;
}

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

<div>
  <label for="test0">This is checked and works</label>
  <input type="checkbox" class="checkbox" id="test0" value="yes" checked="checked" />
</div>
<div id="guestsData">
  <ul>
    <li><a href="#guest-0">Tab 0</a></li>
    <li><a href="#guest-1">Tab 1</a></li>
    <li><a href="#guest-2">Tab 2</a></li>
    <li><a href="#guest-3">Tab 3</a></li>
  </ul>
  <div id="guest-0">
    <div>
      <label for="test1">This is checked and don't works!</label>
      <input type="checkbox" class="checkbox" id="test1" value="yes" checked="checked" />
    </div>
    <div>
      <label for="test2">This is unchecked</label>
      <input type="checkbox" class="checkbox" id="test2" value="yes" />
    </div>
  </div>
  <div id="guest-1">
    Tab 1 content
  </div>
  <div id="guest-2">
    Tab 2 content
  </div>
  <div id="guest-3">
    Tab 3 content
  </div>
</div>

非常感谢任何帮助或想法。

感谢您的帮助。

Answer 1

最后，我解决了正常渲染页面的问题，所有字段都为空（并且未选中复选框！），然后执行ajax查询并使用Javascript填写表单（并选中复选框...）：

$("#guest").prop("checked", true);
$("#guest").button("refresh");

请不要忘记刷新 !! ; - ）

Answer 2

似乎在.tabs()和.checkboxradio()之间存在某种 JS冲突 !!!

这是关于那个漂亮的.png中的图标的background-position

它被用作background，其background-position通过JS设置为0% 0% ...
对应于左上角的图标。
你想要 5th 列中的那个，第9个行。

所以这个的位置是-5 * 16px和-9 * 16px，这是明确的：

"background-position":"-64px -144px"

需要时间来指出这一点！
它绝对必须由JS修复，因为需要稍微延迟来覆盖故障 应用“错误修复”似乎是1ms （这真的是正确的术语！）。

$(document).ready(function(){
  $( function() {
    $("#guestsData").tabs();
    $(".checkbox").checkboxradio();
  });

  setTimeout(function(){
    var target = $(document).find("#test1").prev().find("span").first();
    
    console.log(target.css("background-position"));
    target.css({"background-position":"-64px -144px"});
    console.log(target.css("background-position"));
  },1);
});

div {
  margin: 20px;
}

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

<div>
  <label for="test0">This is checked and works</label>
  <input type="checkbox" class="checkbox" id="test0" value="yes" checked />
</div>

<div id="guestsData">
  <ul>
    <li><a href="#guest-0">Tab 0</a></li>
    <li><a href="#guest-1">Tab 1</a></li>
    <li><a href="#guest-2">Tab 2</a></li>
    <li><a href="#guest-3">Tab 3</a></li>
  </ul>

  <div id="guest-0">
    <div>
      <label for="test1">This is checked and works fine when a <b>BUG FIX</b> is applied!</label>
      <input type="checkbox" class="checkbox" id="test1" value="yes" checked />
    </div>
    <div>
      <label for="test2">This is unchecked</label>
      <input type="checkbox" class="checkbox" id="test2" value="yes" />
    </div>
  </div>

  <div id="guest-1">
    Tab 1 content
  </div>


  <div id="guest-2">
    Tab 2 content
  </div>


  <div id="guest-3">
    Tab 3 content
  </div>
</div>

EDIT！

我刚刚找到了一种更好的方法来修复标签中的所有复选框。
（并且可以取消选中它们！）

只有一个能在文档准备就绪的函数...并且需要两个类。

$(document).ready(function(){
  $( function() {
    $("#guestsData").tabs();
    $(".checkbox").checkboxradio();
  });

  setTimeout(function(){
    
    // Fixes the checkbox at checked state on load 
    var target = $(document).find(".ui-tabs .ui-checkboxradio-icon.ui-icon-check")

    // Apply the bugfix.
    target.addClass("bugfix");

    // Handler to "unfix" now...
    target.on("click",function(){
      $(this).toggleClass("unchecked")
    });

  },1);
  
});

div {
  margin: 20px;
}

.bugfix{
  background-position:-64px -144px !important;
}
.bugfix.unchecked{
  background-position:100% 100% !important;
}

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

<div>
  <label for="test0">This is checked and works</label>
  <input type="checkbox" class="checkbox" id="test0" value="yes" checked />
</div>

<div id="guestsData">
  <ul>
    <li><a href="#guest-0">Tab 0</a></li>
    <li><a href="#guest-1">Tab 1</a></li>
    <li><a href="#guest-2">Tab 2</a></li>
    <li><a href="#guest-3">Tab 3</a></li>
  </ul>

  <div id="guest-0">
    <div>
      <label for="test1">This is checked and works fine when a <b>BUG FIX</b> is applied!</label>
      <input type="checkbox" class="checkbox" id="test1" value="yes" checked />
    </div>
    <div>
      <label for="test2">This is unchecked</label>
      <input type="checkbox" class="checkbox" id="test2" value="yes" />
    </div>
  </div>

  <div id="guest-1">
    Tab 1 content
  </div>


  <div id="guest-2">
    Tab 2 content
  </div>


  <div id="guest-3">
    Tab 3 content
  </div>
</div>

Answer 3

检查元素时，您可以看到// HealthStoreManager.swift override init() { super.init() let allTypes = Set([HKObjectType.workoutType(), HKSeriesType.workoutRoute(), HKObjectType.quantityType(forIdentifier: .activeEnergyBurned)!, HKObjectType.quantityType(forIdentifier: .distanceWalkingRunning)!]) healthStore.requestAuthorization(toShare: allTypes, read: allTypes) { (success, error) in if !success { print(error?.localizedDescription ?? "") } } } 推翻了background-position。

我们需要改进CSS中.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus的{​​{1}}以确保使用它。

要纠正此问题，您可以在CSS中执行此操作：

＆＃13;

＆＃13;

.ui-icon-checked

＆＃13;

$(function() {
  $(".checkbox").checkboxradio();
  $("#guestsData").tabs();
});

＆＃13;

div {
  margin: 20px;
}

label.ui-checkboxradio-label span.ui-icon-check {
  background-position: -64px -144px;
}

label.ui-checkboxradio-label span.ui-icon-blank {
  background-position: 16px 16px;
}

＆＃13;

＆＃13;

＆＃13;

参考：Specificity

Answer 4

问题解决了为背景图像定位加强两个css类。出于某种原因，背景图像的位置与Tab css类相冲突。

您可以使用解决方案测试我的JSFiddle：https://jsfiddle.net/ws68uzbj/

$( function() {
    $(".checkbox").checkboxradio();
    $("#guestsData").tabs();
});

div {
  margin: 20px;
}

.ui-icon-blank {
    background-position: 16px 16px !important;
}

.ui-icon-check {
    background-position: -64px -144px !important;
}

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

<div>
  <label for="test0">This is checked and works</label>
  <input type="checkbox" class="checkbox" id="test0" value="yes" checked="checked" />
</div>

<div id="guestsData">
  <ul>
    <li><a href="#guest-0">Tab 0</a></li>
    <li><a href="#guest-1">Tab 1</a></li>
    <li><a href="#guest-2">Tab 2</a></li>
    <li><a href="#guest-3">Tab 3</a></li>
  </ul>

  <div id="guest-0">
    <div>
      <label for="test1">This is checked and don't works!</label>
      <input type="checkbox" class="checkbox" id="test1" value="yes" checked="checked" />
    </div>
    <div>
      <label for="test2">This is unchecked</label>
      <input type="checkbox" class="checkbox" id="test2" value="yes" />
    </div>
  </div>
  
  <div id="guest-1">
    Tab 1 content
  </div>
  
  
  <div id="guest-2">
    Tab 2 content
  </div>
  
    
  <div id="guest-3">
    Tab 3 content
  </div>
</div>

Answer 5

我在对照组中遇到了同样的问题。最后，我添加了一些样式，它可以与所有jquery ui主题一起使用

.ui-icon-blank {
  background-image: none !important;    
  background-color: #ffffff !important; 
}
.ui-icon-check {
  background-color: #ffffff !important;
  background-position: -64px -144px !important;
}

Answer 6

可能与 radio 复选框位于“ .tab”分类元素中的事实有关。

以某种方式在POST提交后，如果在提交之前选中了这些 radio 复选框，则'ui-state-hover'CSS类将应用于标签中的第一个跨度，但只会将其删除会正确呈现选中标记，而不是jquery主题 .png 图片左上角的^符号这样的插入符号。

选择器是标签的 id 属性（与 radio 复选框输入元素相关的标签）。

$("#other-btn").find("span").first().removeClass("ui-state-hover");