0

Hi I'm trying to hide a bootstrap button. I should be able to see them only when I click on a checkbox. However I'm not able to achieve. Can anyone please help?

HTML

<input type="checkbox" ng-model="todo.done" value="{{todo.task_name}}">
<span class="done-{{todo.done}}"> {{todo.task_name}}</span>         
<a id="done-modal-button" ng-click='onCompleteTask(todo)' ng-model="todo.done" class="btn btn-xs btn-success">Done</a>

JS

$('#done-modal-button').hide();
krish_cloudnow
  • 180
  • 1
  • 13

2 Answers2

1

You dont need Jquery to do this! You only have to change this line:

<a id="done-modal-button" ng-click='onCompleteTask(todo)' ng-model="todo.done" class="btn btn-xs btn-success">Done</a>

To this:

<a id="done-modal-button" ng-click='onCompleteTask(todo)' ng-show="todo.done" class="btn btn-xs btn-success">Done</a>

You want to show the link only when the "todo.done" is true

http://jsfiddle.net/HB7LU/9139/

I suggest you read this post:

"Thinking in AngularJS" if I have a jQuery background?

Community
  • 1
  • 1
Fabricio Duarte
  • 342
  • 1
  • 7
  • This worked perfectly fine. It was idiotic on my part to not think on this line. Thanks a lot @Fabrico. – krish_cloudnow Dec 14 '14 at 02:54
  • Great answer, I'm not familiar with Angular and wanted to give him a working answer till he found out a proper way :D +1 from me :D – Alin Dec 14 '14 at 13:43
0

Try using CSS display:none to hide it :

<a id="done-modal-button" ng-click='onCompleteTask(todo)' ng-model="todo.done" class="btn btn-xs btn-success" style="display:none;">Done</a>

Update based on your comment

To toggle visibility depending on weather a checkbox is checked or not you need to see if it's checked first, and if it is, show the button, else hide it back.

$(document).ready(function() {    
    $('#checkboxid').click(function() {
        if($(this).is(":checked"))
        {
            $('#done-modal-button').show();
        } else {
            $('#done-modal-button').hide();
        }
    });
});

Working JSfiddle

Update 2

I guess you have no other jquery library in your script, to use the method above you could use the method in the jsfiddle I gave you in the comment OR you could load jquery-1.9.1 and it will work, see this JSFIDDLE with AngularJS and jQuery-1.9.1

To load the library just add this inside your head tags:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
Alin
  • 1,218
  • 5
  • 21
  • 47
  • that worked. Thanks a lot. Any idea on how I can make it display is a checkbox is checked. – krish_cloudnow Dec 13 '14 at 18:43
  • @krish_cloudnow you want to make it visible when a ckechbox is checked and hidden when not ? – Alin Dec 13 '14 at 18:45
  • @krish_cloudnow I updated my answer and also added a working jsfiddle with how the checkbox works. If this answers your question, feel free to mark it :) – Alin Dec 13 '14 at 18:51
  • It is working fine in ur JSfiddle. I tried making changes and no issues. However not working in my code. I'm using AngularJS & Bootstrap. Is there any other issue? – krish_cloudnow Dec 13 '14 at 19:07
  • @krish_cloudnow Things change if you are using AngularJS, check this jsfiddle to see how a checkbox action works in angluar : http://jsfiddle.net/cherniv/JBwmA/ – Alin Dec 13 '14 at 19:30
  • @krish_cloudnow I've made another update to the answer using Angular..It has to work now :) – Alin Dec 13 '14 at 19:38