禁用重复div内的所有按钮

Question

So i have a Jquery template that display multiple results to the user, at the bottom of the results is a div which i am using to store some buttons.

Now, depending on the status of a record, i want to hide all buttons within the e div's, but for some reason, the following does nothing:

$('#violationFooter').find('input,button').prop('disabled', true);

I've tried several other settings, the following hide the parent div

   $('#violationResults').hide();

but this doesn't do anything either

   $('#violationResults #violationFooter').hide();

I'm at a loss

EDIT

   <script id="violationtmpl" type="text/x-jquery-tmpl">
            <div class="row user-infos ${MessageId}">
                <div class="col-xs-12 col-sm-12 col-md-10 col-lg-12">
                    <div class="panel panel-danger">
                        <div class="panel-heading">
                            <h3 class="panel-title">Violation</h3>
                        </div>
                        <div  class="panel-body">
                            <div class="row-fluid">
                                <div class="col-md-9 col-lg-9 hidden-xs hidden-sm">
                                    <table class="table table-user-information" id="scrollable" style="height: 200px;">
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div id="violationFooter" class="panel-footer">
                            <button class="btn  btn-success btn-xs" type="button" data-toggle="tooltip" data-original-title="Good guy?" onclick="" ><i class="fa fa-user-md"></i></button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script> 

*EDIT *

This is the call to populate the Template

function GetViolations(messageId) {

            $.ajax({
                type: "POST",
                url: "Default.aspx/GetViolationMessages",
                cache: false,
                data: JSON.stringify({ messageId: messageId }),
                contentType: "application/json; charset-utf-8",
                dataType: "json",
                error:
                    function(xhr) {

                        var contentType = xhr.getResponseHeader("Content-Type");
                        if (xhr.status === 401 && contentType.toLowerCase().indexOf("text/html") >= 0) {
                            window.location.reload();
                        }
                    },
                success: function(msg) {
                    // Need to work out a way of refreshing the screen

                    $.each(msg.d, function(index, item) {

                        $('#violationtmpl').tmpl(item).appendTo('#violationResults');

                    });


                    var panels = $('.user-infos');
                    var panelsButton = $('.dropdown-user');
                    panels.hide();

                    //Click dropdown
                    panelsButton.click(function() {
                        //get data-for attribute
                        var dataFor = $(this).attr('data-for');
                        var idFor = $(dataFor);

                        //current button
                        var currentButton = $(this);
                        idFor.slideToggle(400, function() {
                            //Completed slidetoggle
                            if (idFor.is(':visible')) {
                                currentButton.html('<i class="glyphicon glyphicon-chevron-up text-muted"></i>');
                            } else {
                                currentButton.html('<i class="glyphicon glyphicon-chevron-down text-muted"></i>');
                            }
                        });
                    });

                    $('[data-toggle="tooltip"]').tooltip();
                }
            });
        };

EDIT

rendered HTML image

Answer 1

try this:

$('#violationFooter button').hide()

or better

$('.panel-footer button').hide()

Answer 2

html

<button class="btn  btn-success btn-xs hideButton" type="button" data-toggle="tooltip" data-original-title="Good guy?" onclick="" >
  <i class="fa fa-user-md"></i>
</button>
<button class="btn  btn-success btn-xs" type="button" data-toggle="tooltip" data-original-title="Good guy?" onclick="" >
  <i class="fa fa-user-md"></i>
</button>

jquery

$('.hideButton').css("display", "none");
$('.hideButton').hide();

u can add your own class to the buttons that need to hide.. for eg here first button wll hide second will not!

Answer 3

Ok, so it would appear I was trying to hide something that wasn't there :-) I trace where the buttons were being rendered and i was trying to hide them before they were drawn, dooooh

thanks for your input guys