jquery multiselect - 删除“un-checkall”链接?

时间:2015-10-06 13:30:33

标签: javascript jquery

无论如何都要从heaer中删除“uncheck-all”链接?

我正在使用ehynds版本

https://github.com/ehynds/jquery-ui-multiselect-widget

$('#dropDown').multiselect({
     noneSelectedText: 'Filter',
     selectedText: 'Filter',
}); 

来自他们网站的示例截图 enter image description here

2 个答案:

答案 0 :(得分:2)

使用标题选项似乎是解决这个问题的方法。 un / check all按钮是默认标题的一部分。

$('#dropDown').multiselect({
     noneSelectedText: 'Filter',
     selectedText: 'Filter',
     header:false,//Or put your own HTML
});

默认标题HTML是

'<a class="ui-multiselect-all" href="#"><span class="ui-icon ui-icon-check"></span><span>' + o.checkAllText + '</span></a></li><li><a class="ui-multiselect-none" href="#"><span class="ui-icon ui-icon-closethick"></span><span>' + o.uncheckAllText + '</span></a>';

答案 1 :(得分:1)

这是您要删除的元素周围的HTML,即中间li

<li>
  <a class="ui-multiselect-all" href="#">
    <span class="ui-icon ui-icon-check"></span>
    <span>Check all</span>
  </a>
</li>
<li>
  <a class="ui-multiselect-none" href="#">
    <span class="ui-icon ui-icon-closethick"></span>
    <span>Uncheck all</span>
  </a>
</li>
<li class="ui-multiselect-close">
  <a href="#" class="ui-multiselect-close">
    <span class="ui-icon ui-icon-circle-close"></span>
  </a>
</li>

即使没有要删除的范围上的特定类,ID或名称,您也可以通过其内容找到它:

$('li:contains("Uncheck all")').remove();

虽然没有唯一标识范围,但包含它的元素是。正如Guruprasad Rao评论的那样,您可以在锚标记上使用该类:

$('.ui-multiselect-none').closest('li').remove();

以下代码段通过突出显示要删除的元素来演示文本匹配方法。 (将.css()方法替换为.remove()。)

$(function(){
    prettyPrint();
    $("select").multiselect();
    $('li:contains("Uncheck all")').css( "background-color", "red" );//.remove();
    //$('.ui-multiselect-none').closest('li').css( "background-color", "red" );//.remove();
});
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/ehynds/jquery-ui-multiselect-widget/master/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/ehynds/jquery-ui-multiselect-widget/master/demos/assets/style.css" />
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/ehynds/jquery-ui-multiselect-widget/master/demos/assets/prettify.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/ehynds/jquery-ui-multiselect-widget/master/demos/assets/prettify.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/ehynds/jquery-ui-multiselect-widget/master/src/jquery.multiselect.js"></script>


<form>
	<p>
		<select name="example-presets" multiple="multiple" size="5">
		<option value="option1" selected="selected">Option 1</option>
		<option value="option2">Option 2</option>
		<option value="option3" selected="selected">Option 3</option>
		<option value="option4" selected="selected">Option 4</option>
		<option value="option5" disabled="disabled">Option 5</option>
		<option value="option6" disabled="disabled">Option 6</option>
		<option value="option7">Option 7</option>
		<option value="option8">Option 8</option>
		<option value="option9">Option 9</option>
		</select>
	</p>
</form>