0

I have written html as following lines of code

<input id="<code generated id>" type="text" value="select"/> <div id="<code generated id>" class="popup"> <ul id="<code generated id>" class="none"> <li><input type="checkbox" value="A"/></li> <li><input type="checkbox" value="B"/></li> <li><input type="checkbox" value="C"/></li> </ul> </div>

and style is 

 .none { display:none; }

I have written jQuery as below lines of code in order to make ul tag visible 

 $(document).ready(function () { $('#<%= pnlchkouter.ClientID %> #<%= txtBoxCustom.ClientID %>').bind('focus', function () { // alert("<%= chkList.ClientID %>"); $(".popup-checkbox ul").css({"display":"none"}); $('#<%= chkList.ClientID %>').css({"display":"block" }); }); });

When I write focusout like below 

$(document).ready(function () { $('#<%= pnlchkouter.ClientID %> #<%= txtBoxCustom.ClientID %>').bind('focusout', function () { $(".popup-checkbox ul").css({ "display": "none" }); }); });

It works as required but the issue is that I am not able to check the checkboxes.

Improve this question
3
  • 2
    Other then saying id="<code generated id>" and $('#<%= pnlchkouter.ClientID %> #<%= txtBoxCustom.ClientID %>'), why not just place in example values and place this in a snippet/fiddle? It will make it much easier for us to work with. Commented Sep 3, 2015 at 5:37
  • how will you check the checkbox when you are making then invisible on focusout using $(".popup-checkbox ul").css({ "display": "none" }); this code Commented Sep 3, 2015 at 5:41
  • When we click on textbox the ul tag becomes visible... its not invisible... After becoming visible, when we click on checkbox. it vanishes. we are not able to check the checkbox... Commented Sep 3, 2015 at 6:01

1 Answer 1

Reset to default
1

Are you looking for something like this? Just for simplicity I have given some dummy ids and classes to HTML elements.

$(document).ready(function () { $('#mytextbox').bind('focus', function () { // alert("<%= chkList.ClientID %>"); $(".popup-checkbox ul").css({"display":"none"}); $('#checkboxul').css({"display":"block" }); }); $('#mytextbox').bind('focusout', function () { setTimeout(function(){ if(!$("#checkboxul input[type=checkbox]").is(":focus")) $(".popup-checkbox ul").css({ "display": "none" }); },200); }); });
.none { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input id="mytextbox" type="text" value="select"/> <div id="mypopupdiv" class="popup-checkbox"> <ul id="checkboxul" class="none"> <li><input type="checkbox" value="A"/></li> <li><input type="checkbox" value="B"/></li> <li><input type="checkbox" value="C"/></li> </ul> </div>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

It some how is able to hold ul tag there but when i check the checkbox it vanishes