JQuery UI - Improper checkbox state icon using .checkboxradio() and .tabs()

jquery mobile changelog
jquery mobile ui download
jquery mobile plugin download
jquery ui for mobile devices
jquery mobile controls
jquery mobile cards
jquery mobile demo app
jquery mobile documentation

I've some trouble to properly render a selected checkbox when put inside a tabs widget.

Outside the tabs the checkboxes renders correctly.

I prepared a JSFiddle showing the issue: 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>

Finally I solved the issue rendering the page normally with all fields empty (and checkboxes unchecked!), then execute an ajax query and filling the form (and checking the checkboxes...) with Javascript:

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

Please don't forget the refresh!! ;-)

#15267 (Improper checkbox state icon using .checkboxradio() and , Improper checkbox state icon using .checkboxradio() and .tabs() I've some trouble to properly render a selected checkbox when put inside a tabs widget. jQuery UI Checkboxradio - Default functionality. Checkbox and radio button widgets. Select a Location: New York Paris London. 2 Star 3 Star 4 Star 5 Star. Checkbox nested in label. 2 Double 2 Queen 1 Queen 1 King. Examples of the markup that can be used with checkboxes and radio buttons. <!doctype html> < html lang = "en" >

Seems like to be some kind of a JS conflict between .tabs() and .checkboxradio()!!!

And it is about the background-position of the icon located in that nice .png.

It is used as a background and its background-position setted to 0% 0% via JS... Which correspond to the top-left icon. And you want the one in the 5th column, 9th row.

So the position for this one is -5 * 16px and -9 * 16px which is, in clear:

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

It took time to nail that! It absolutely has to be fixed by JS, since a slight delay is needed to override the glitch. 1ms seems to be enougth to apply the "bug fix".     (That really is the right term!).

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

Styling of added checkbox incorrect when in controlgroup · Issue , If you programmatically add a new checkbox to a controlgroup of the jsbin template did not work, it always showed the jqm wait icon. Refreshing a button, checkboxradio or selectmenu means updating its state. If you consult the API documentation for the jQuery UI widget factory's option() method, you  If the input is of type radio, this will also get the ui-checkboxradio-radio-label class. ui-checkboxradio-icon: If the icon option is enabled, the generated icon has this class. ui-checkboxradio-icon-space: If the icon option is enabled, an extra element with this class as added between the text label and the icon. Dependencies.labels() Form

When you inspect the element, you can see that background-position is being overruled by .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.

We need to improve the Specificity of .ui-icon-checked in CSS to ensure it used.

To correct this, you can do it in 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>

Checkboxradio, The Checkboxradio widget enhances standard checkbox and radio input This example sets the icon option to specify whether to show the checkbox or radio icon: 1. 2 table lists the different options that can be used with checkboxradio() method: option(optionName, value), Sets the value of the checkboxradio option​  The official jQuery user interface library. Contribute to jquery/jquery-ui development by creating an account on GitHub.

Problem solved simply reinforcing two css classes for the background image positioning. For some reason, the positioning of the background image is dislocated in conflict with the Tab css classes.

You can test my JSFiddle with the solution: 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>

jQuery Mobile 1.5.0-alpha1 Changelog, Fixed inconsistent vclick behavior with Mobile VoiceOver enabled (#8271, e40de81); Fixed hashToSelector() (#6696); Fixed Hash Processing error when hash has Updated to keep background for checkbox-off icon when using no-​disc icons Added jQuery UI button widget to replace jQuery mobile one (​d04308f)  Improper checkbox state icon using .checkboxradio() and .tabs() new bug minor none #15268: Sortable containment height doesn't update on over and out event on connected sortables: new bug minor none #15269

I was getting same problem with controlgroup. Finally, I add some style and it work with all jquery ui theme

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

Default Theme Changelog, chip: select icon position; grid: keep empty checkbox visible in kendo-jquery-grid tabstrip: remove default browser outline; treelist: extract treelist specific styles in in themes instead of lerna; use shade() instead of blend-multiply() for themes incorrect inverse color for event title #168; scheduler: navigation focus state  Checkbox and radio button widgets Radio Group Select a Location: New York Paris London Checkbox Hotel Ratings: 2 Star 3 Star 4 Star 5 Star Checkbox nested in label Bed Type: 2 Double 2 Queen 1 Queen 1 King

How to know which radio button is selected using jQuery , To check which radio button is selected in a form, we first get the desired input as an option and then the value of this selection can then be accessed by the val​() method. How to get all selected checkboxes in an array using jQuery ? Please Improve this article if you find anything incorrect by clicking on the "​Improve  Improper checkbox state icon using .checkboxradio() and .tabs() new bug minor none: Description: I've some trouble to properly render a selected checkbox when put inside a tabs widget. Outside the tabs the checkboxes renders correctly.

jquery, Virker som å være en slags en JS konflikt mellom .tabs() og .checkboxradio() !!! Og det handler Fixes the checkbox at checked state on load var target = $(​document).find(".ui-tabs Vi trenger å forbedre Spesifisitet av .ui-icon-checked i CSS for å sikre at det brukes. By using our services, you agree to our use of cookies. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

JSDoc: Source: src/main/javascript/oracle/oj/ojbutton/ojbutton.js, (function() // Button / Buttonset wrapper function, to keep "private static <p>Also, buttons and buttonsets can be placed in a [JET Toolbar]{@link oj. JET for jQuery UI developers * <a class="bookmarkable-link" title="Bookmarkable Link" where click-drag on checkbox/radio btn's label(JET decorates label as button for  Traditional desktop checkboxes are not optimized for touch input so in jQuery Mobile, we style the label for the checkboxes so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback. The checkbox controls below use standard input/label markup, but are styled to be more touch-friendly.

Comments
  • It seems to be a race condition between the hover css and regular css states, but overriding them with combo classes did the trick for me. Anything to make these two background-position, background-color, and border styles to resolve properly. Sometimes I suspect Firebug is also causing the condition.
  • You can also use a more complex css rule to take precidence to avoid having to use #important. While #important works, I save it for when I have some varying mixes from multiple JS open source modules.