JQuery UI -使用.checkboxradio()和.tabs()进行不正确的复选框状态图标

Question

在将选中的复选框放入选项卡小部件中时，我遇到了一些问题。

在选项卡之外，复选框将正确呈现。

我准备了一个展示问题的JSFiddle：https://jsfiddle.net/x30gzqo4/8/

​

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

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

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

​

它用作一个background，它的background-position通过JS设置为0% 0%。

对应于左上角的图标。

您需要第5列中的一个，9行。

因此，这一项的位置是-5 * 16px和-9 * 16px，这是明确的：

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

，我花了很长时间才把它钉上！

它绝对必须由JS修复，因为需要稍加延迟才能覆盖故障。

1ms似乎是应用"bug修复“的关键。

(这真是个好词！)

​

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

​

编辑！

我刚刚找到了一种更好的方法来修复选项卡中的所有复选框.

(并且能够取消检查！！)

只有在文档准备就绪后才能运行的函数..。需要两门课。

​

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

当您检查元素时，您可以看到background-position正被.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所推翻。

我们需要改进CSS中的特异性 of .ui-icon-checked，以确保它的使用。

要纠正这种情况，可以使用CSS：

​

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

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;
}

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

​

参考资料：在CSS中使用“！重要”意味着什么？