adding attribute to input tag using jquery but the functionality of the attribute not working after have been added Bootstrap star rating

Question

i'm developing a star rating system for products using Bootstrap Star Rating in mvc 4 application everything is ok but when a user rate some product i want to disable the start to prevent the user from rating again and i use jquery for to do that from the documentation of Bootstrap Star Rating to disable the stars i need just to add the attribute data-disabled="true" for the star input like that from the documentation

// Set the star rating control to be readonly or disabled
<input id="input-5a" class="rating" data-readonly="true">
<input id="input-5b" class="rating" data-disabled="true">

so in my case i want to disable the star input after the user have rate so i add the attribute data-disabled="true" to the star input using jquery and it added to the star input but is still not disable the user can rate again so help what should i do to disabled

my script is

<script type="text/javascript">

$(function () {

    $('.rating').on('rating.change', function (event, value) {
        var productRatedID = $(this).attr("id");
        console.log(productRatedID);

        $.post('@Url.Action("SaveStarRating", "Home")',
        { "starsCount": value, "productID": productRatedID })
        .error(function () {
            console.log('error');
        }).success(function () {
            console.log("DONE SAVING");
            $('#' + productRatedID).attr("data-disabled", "true");
            $('#mes').html("<p>thank you for Rating</p>");
        });
    });
});

and in my view

<input id="@Model.Product.ProductID" value="0" type="number" class="rating" 
 min=0 max=5 step=1 data-size="sm" data-show-clear="false" 
 data-show-caption="false" />
<div id="mes"></div>

and the html code generated before the user rate some product is

<div class="star-rating rating-sm rating-active">
<div class="rating-container rating-gly-star" data-content="">
<div class="rating-stars" data-content="" style="width: 60%;"></div>
<input id="2" value="0" type="number" class="rating form-control" min="0" max="5"
 step="1" data-size="sm" data-show-clear="false" data-show-caption="false" 
 style="display: none;">
</div>
</div>
<div id="mes"></div>

and the html after the user rate is

<div class="star-rating rating-sm rating-active">
<div class="rating-container rating-gly-star" data-content="">
<div class="rating-stars" data-content="" style="width: 60%;"></div>
<input id="2" value="0" type="number" class="rating form-control" min="0" max="5"
 step="1" data-size="sm" data-show-clear="false" data-show-caption="false"
 data-disabled="true" style="display: none;">
</div>
</div>
<div id="mes"><p>thank you for Rating</p></div>

so please help the jquery work fine and add the attribute data-disabled="true" to the star input and add the text to the div with id = mse so why the star not disabled after the attribute data-disabled is added thanks in advance for any help

Answer 1

I have not tested it, but i think you should change this line :

$('#' + productRatedID).attr("data-disabled", "true");

into

$('#' + productRatedID).rating('refresh', {disabled: true});

The attribute data-disabled will probably only work during initialization.