CODEWITHSUNDEEP
javascriptjqueryjquery-mobilecheckbox
Vini
Vini

Reputation: 977

Dynamically set checkbox label text cause the style issue in checkbox

In my jquery mobile(v 1.3.2) application i just created a checkbox and set checkbox text dynamically using jquery. When set like this the checkbox style is collapsed.

Here's is the sample code:

<input type="checkbox" name="OptIconsLabels" id="OptIconsLabels" class="custom" data-theme="c" />
<label for="OptIconsLabels"></label>

Js:

$("#OptToolbarLbl").text("Label");
$('label[for="OptIconsLabels"]').text("Opt Icon");
$("#OptIconsLabels").attr("checked", false).checkboxradio("refresh");

Here is the FIDDLE DEMO

Note: I tried trigger page create also 

$(.page).trigger("pagecreate");

Upvotes: 0

Views: 861

Answers (1)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

If you inspect the DOM structure after page load then label is not getting used as it is but there are some <span> get added as a children to display label text. That span has class="ui-btn-text" which you need to update. See below code -

$(document).on("pageshow","#OptionsGeneral", function() {

     $("#OptToolbarLbl").text("Label");
     $('label[for="OptIconsLabels"] span.ui-btn-text').text("Opt Icon");
     $("#OptIconsLabels").attr("checked", false).checkboxradio("refresh");
});

DEMO

Upvotes: 2

Related Questions