Question

我正在使用Jquery UI，目前正在尝试更改Checkbox上的文本（它们看起来像按钮）。出于某种原因，我无法使用toggle方法在每个更改事件上更改文本。这是html在IE 8中出现的内容

    <div data-hands-jqui-type='buttonset' data-hands-jqui-props='{"buttonWidth":0,"disabled":false,"handsOnCreate":null}' class='editor-field ui-widget'>
        <label for="IsClosedSunday">Open</label>
        <input data-hands-jqui-props="{}" data-hands-jqui-type="checkfield" data-hands-onchange="Vendor.IsClosedSelected" data-val="true" data-val-required="The Open field is required." id="IsClosedSunday" name="IsClosedSunday" type="checkbox" value="true" />
        <input name="IsClosedSunday" type="hidden" value="false" />
    </div>

对我来说，看起来标签是我需要改变的，但我无法弄清楚如何去做它。

现在我发现另一个So线程使用它：

  $("#IsClosedSunday").button().toggle(function () {

        $(this).button('option', 'label', 'Open');
    },
        function () {
            $(this).button('option', 'label', 'Closed');

        });

通过此设置，我可以在选中时将其从“打开”更改为“已关闭”，但在取消选中时不会返回“打开”。

有什么想法吗？

Answer 1

试试这个： -

Demo

   $("#IsClosedSunday").button().click(function () {
    var text = $(this).is(':checked')? "Closed": "Open"
        $(this).button('option', 'label', text);
    });

您也可以使用change活动。

$("#IsClosedSunday").button().change(function () {
    var text = $(this).is(':checked')? "Closed": "Open"
        $(this).button('option', 'label', text);
    });

.toggle()

在您使用toggle()的代码中，它不是按钮上的事件（而是复选框）。当您最初调用.toggle()时，它只会强制按钮的切换状态。当您选中或更改复选框时，它不会被触发。您应该使用change或click事件。另外我认为切换不支持2个回拨。

Jquery UI复选框作为按钮更改文本值

1 个答案: