动态设置复选框标签文本会导致复选框中的样式问题

Dynamically set checkbox label text cause the style issue in checkbox

本文关键字：复选框 样式 问题 设置 标签 文本 动态      更新时间：2023-09-26

在我的jquery mobile(v 1.3.2)应用程序中，我刚刚创建了一个复选框，并使用jquery动态设置复选框文本。这样设置时，复选框样式将折叠。

这是示例代码：

<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");

这是FIDDLE演示

注意：我尝试了触发页面创建也

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

如果在页面加载后检查DOM结构，则label不会按原样使用，但会添加一些<span>作为子项来显示label文本。该跨度具有需要更新的class="ui-btn-text"。参见以下代码-

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

相关文章：