JQuery function disables the rest of the option list -
i stuck @ following point:
i have got option list, based on plain html list. want make list able select more on option. wrote function shall that. now, problem if js function called, function disabled particular number of entries.
example: when there more 5 options in list , 5 options has been selected, rest of options gets disabled.
css
<style> ul li{list-style:none; float:left; margin-right:20px; cursor:pointer} ul li p.active{text-decoration:underline} </style>
js
<script type="text/javascript"> $(function () { var countli = 5; //checkboxes $("#chk>li>p").click(function () { if ($(this).hasclass("active")) { countli -= 1; if ($("#chkresult").val() != "") { $("#chkresult").val($("#chkresult").val().replace("," + $(this).html(), "")); $("#chkresult").val($("#chkresult").val().replace($(this).html() + ",", "")); $("#chkresult").val($("#chkresult").val().replace($(this).html(), "")); } else { countli += 1; } if (count == 0) { $("#chk>li>p").each(function () { if (!($(this).hasclass("active"))) { $(this).attr("disabled", "true"); } }); } else { $("#chk>li>p").removeattr("disabled"); } } else { if ($("#chkresult").val() == "") { $("#chkresult").val($(this).html()); } else { $("#chkresult").val($("#chkresult").val() + "," + $(this).html()); } } $(this).toggleclass("active"); }); }); </script>
html
<ul id="chk"> <li><p>one</p></li> <li><p>two</p></li> <li><p>three</p></li> <li><p>four</p></li> <li><p>five</p></li> <li><p>six</p></li> <li><p>seven</p></li> <li><p>eight</p></li> <li><p>nine</p></li> <li><p>ten</p></li> </ul> <br /> <input id="chkresult" type="text" style="width:500px;"/>
you need use jquery :lt
selector, :
$('#chk>li>p.active:lt(5)')
this automatically narrows selector's returned set first n
matches.
Comments
Post a Comment