使用 jquery 向输入标签添加属性，但添加后该属性的功能不起作用 Bootstrap 星级

Question

我正在为在 mvc 4 应用程序中使用 Bootstrap Star Rating 的产品开发星级评分系统，一切正常，但是当用户评价某些产品时，我想禁用启动以防止用户再次评分，我使用 jquery 来从 Bootstrap Star Rating 的 documentation 执行此操作以禁用星星我只需要添加属性 data-disabled="true" 用于文档中的星星输入

// 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">

所以在我的情况下，我想在用户获得评分后禁用星号输入，所以我使用 jquery 将属性data-disabled="true" 添加到星号输入中，并将它添加到星号输入中，但仍然没有禁用用户可以再次评分所以帮助我应该怎么做禁用

我的脚本是

<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>");
        });
    });
});

在我看来

<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>

在用户评价某些产品之前生成的html代码是

<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>

用户评分后的html是

<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>

所以请帮助 jquery 正常工作并将属性 data-disabled="true" 添加到星形输入并将文本添加到 id = mse 的 div 那么为什么在添加属性 data-disabled 后星形没有被禁用提前感谢任何帮助

Answer 1

我没有测试过，但我认为你应该改变这一行：

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

进入

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

data-disabled 属性可能只在初始化期间起作用。