1

The button is not disabled when I click on it, here with my code:

<script type="text/javascript">
    function SetNewsCommentReportFlag(newsCommentId) {
        $("#news-comment" + newsCommentId).text("This comment has been removed");
        $("#post-button" + newsCommentId).attr("onclick", "this.disabled=true;");
        var jqxhr = $.getJSON("<%= 
                Url.Action(
                    "SetNewsCommentReportFlag", 
                    "Home", 
                    new { area = "News" }
                ) 
            %>?newsCommentId=" + newsCommentId, function (data) { });
    }
</script>


<div class="news-comment" id="news-comment<%: Model.NewsCommentId %>">
    <% if (Model.Reported)
    {
        Model.NewsComment = "This comment has been removed";    
    } else  %>
    <%: Model.NewsComment %>
</div>
<div class="clear"></div>
<div class="actions-right">    
    <a href="javascript:SetNewsCommentReportFlag(<%: Model.NewsCommentId %>);" 
        class="button" id="post_button<%: Model.NewsCommentId %>"
    ><%: Html.Resource(Resources.Global.Button.Report) %></a>                
</div>

like this?:

<script type="text/javascript">
    function SetNewsCommentReportFlag(newsCommentId) {
        $("#news-comment" + newsCommentId).text("This comment has been removed");
        $("#post-button" + newsCommentId).attr("onclick", "this.disabled=true;");
            var jqxhr = $.getJSON(
                "/News/Home/SetNewsCommentReportFlag?newsCommentId=" 
                + newsCommentId, function (data) { }
            );
    }
</script>

<div class="news-post-list-item">
    <div class="news-post-user-info-wrapper">
        <div class="avatar">
            <img src="/ThemeFiles/Base/images/User/user-avatar.png" 
                width="52" height="52" alt="Avatar" />   
        </div>
        <div class="who-and-when-box">
            25/02/2013 13:20:56
            <br />
            <br />
            Cecilia Torres Castro 
        </div>
        <div class="news-comment" id="news-comment3">
            sdfsdf
        </div>
        <div class="clear"></div>
        <div class="actions-right">    
            <a href="javascript:SetNewsCommentReportFlag(3);" 
                class="button" id="post_button3">Report</a>                
        </div>
    </div>     
    <div class="clear"></div> 
</div>

What am I doing wrong please? Thanks

Jaak Kütt
  • 2,566
  • 4
  • 31
  • 39
charlie_cat
  • 1,830
  • 7
  • 44
  • 73

2 Answers2

2

You're not using an actual button, you're using an anchor tag:

<a href="javascript:SetNewsCommentReportFlag(3);" class="button" id="post_button3">Report</a>

These can't be disabled using disabled=true, that only works on actual buttons.

Because you are using an anchor tag instead of a real button, you have to do it slightly differently.

See:

jQuery disable a link

or

How do I disable a href link in JavaScript?

You will also have to give the disabled 'button' a new css class to make it look visually disabled too.

Community
  • 1
  • 1
mattmanser
  • 5,719
  • 3
  • 38
  • 50
1

You're adding an onclick event to disable it, but after that line you are already disabling it.

Because you have already disabled the element, no events will fire on it. Even if they did, they'd produce the same result in the element being disabled. I think you need to get rid of this line:

$("#post-button").attr("disabled", "disabled");

Also, you have syntax issues in this line:

post_button.Attributes.Add("onclick", "this.disabled=true;");

Change it to:

$("#post_button").attr("onclick", "this.disabled=true;");
Mathew Thompson
  • 55,877
  • 15
  • 127
  • 148