Question

我有一个复选框，我正在使用jqueryui按钮小部件，我希望能够根据其他因素显示或隐藏它。但是，我发现.hide（）不起作用。在挖掘deaper时，似乎它不起作用，因为复选框上的caling .hide（）只会影响复选框元素，而不会影响向用户显示的按钮元素。

我确信我可以使用jquery以及关于如何呈现按钮来隐藏元素的一些知识，但这会变得依赖于实现，我宁愿避免这种情况，因此它不会破坏未来版本。< / p>

另外，我可以将整个事物包装在其他元素中并显示或隐藏它。这可能是我能够想到的最好的想法，但我必须使用CSS来确保这个额外的元素不会抛弃页面其余部分的布局。 / p>

有没有正确的方法呢？这是一个jsfiddle，显示.hide（）不起作用。 http://jsfiddle.net/ormico/2zxde/

<label for="a">AAA</label><input id="a" type="checkbox"/>
<button id="h">Hide</button>

$("#a").button();

$("#h").click(function(e){
    e.preventDefault();
    $("#a").hide();
});

Answer 1

这项工作，但我不知道为什么......将html代码放入div中隐藏/显示此

<div id="pre"><input id="a" type="checkbox"/><label for="a">AAA</label></div>
<button id="h">Hide</button>

和jquery

$("#a").button();

$("#h").click(function(e){
    e.preventDefault();
    $("#pre").hide();

});

Answer 2

答案很简单：按钮由html树中的2个DOM元素组成。

只需在两者上拨打hide()和show()，而不只是1：

$("label").hide();
$("#a").hide();

演示：http://jsfiddle.net/2zxde/16/

Answer 3

您可以在此处找到按钮/复选框的文档：http://api.jqueryui.com/button/#method-destroy

你可以这样做：

$("#a").button();

$("#h").click(function(e){
    e.preventDefault();
    // destroy jQueryUI button
    $("#a").button('destroy');
    // and then hide the original checkbox
    $("#a").hide();
});

Answer 4

你是对的，只是隐藏了实际的输入元素。如果你还想隐藏标签，（ui-widget）。你可以做一些像@ 13ruce1337这样的事情：

$("#a, label[for=a]").hide();

这是jsfiddle example。

有没有正确的方法来隐藏jQueryUI复选框按钮？

4 个答案: