title: adding attribute to input tag using jquery but the functionality of the attribute not working after have been added Bootstrap star rating
body: <p>i'm developing a star rating system for products using <a href="http://plugins.krajee.com/star-rating" rel="nofollow">Bootstrap Star Rating</a> 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 <a href="http://plugins.krajee.com/star-rating/demo" rel="nofollow">documentation</a> of Bootstrap Star Rating  to disable the stars i need just to add the attribute <code>data-disabled="true"</code> for the star input like that from the documentation</p>
  
  <pre><code>// Set the star rating control to be readonly or disabled
  &lt;input id="input-5a" class="rating" data-readonly="true"&gt;
  &lt;input id="input-5b" class="rating" data-disabled="true"&gt;
  </code></pre>
  
  <p>so in my case i want to disable the star input after the user have rate so i add the attribute <code>data-disabled="true"</code> 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 </p>
  
  <p>my script is </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $(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("&lt;p&gt;thank you for Rating&lt;/p&gt;");
          });
      });
  });
  </code></pre>
  
  <p></p>
  
  <p>and in my view</p>
  
  <pre><code>&lt;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" /&gt;
  &lt;div id="mes"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and the html code generated before the user rate some product is </p>
  
  <pre><code>&lt;div class="star-rating rating-sm rating-active"&gt;
  &lt;div class="rating-container rating-gly-star" data-content=""&gt;
  &lt;div class="rating-stars" data-content="" style="width: 60%;"&gt;&lt;/div&gt;
  &lt;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;"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="mes"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and the html after the user rate is</p>
  
  <pre><code>&lt;div class="star-rating rating-sm rating-active"&gt;
  &lt;div class="rating-container rating-gly-star" data-content=""&gt;
  &lt;div class="rating-stars" data-content="" style="width: 60%;"&gt;&lt;/div&gt;
  &lt;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;"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="mes"&gt;&lt;p&gt;thank you for Rating&lt;/p&gt;&lt;/div&gt;
  </code></pre>
  
  <p>so please help the jquery work fine and add the attribute <code>data-disabled="true"</code> to the star input and add the text to the div with id = mse so why the star not disabled after the attribute <code>data-disabled</code> is added thanks in advance for any help </p>