无法使用 jquery 将布尔值设置为数据属性

Question

我有一个带有数据属性的按钮：

<button id="manageEditContract" type="button" class="btn btn-default" data-is-allow-to-edit="@(Model.Contract.IsAllowToEdit)">
       @(Model.Contract.IsAllowToEdit ? "Block" : "Unblock") 
</button>

当用户单击时，我希望按钮更改其属性。作为我的操作方法 returns JSON 具有两个属性 "IsOk" 和 "IsAllowToEdit" 的对象，我写了这个函数：

$('#manageEditContract').on('click', function () {
    var isAllowToEdit = $(this).data('isAllowToEdit');

    $.ajax({
        url: '@Url.Action("ChangeEditOption")',
        type: 'POST',
        data: { isAllowToEdit: isAllowToEdit },
        success: function (data) {
            if (data.IsOk) {
                $('#manageEditContract').data('isAllowToEdit', JSON.stringify(data.IsAllowToEdit));
            }
        }
    });
});

但是没有变。

我试过 JSON.stringify 没有它但没有成功。

已更新：正如答案所建议的那样，我应该使用 "attr" 将值设置为特定属性。但我也意识到，当我获取数据属性的值时，我不应该使用 "data"，因为它一直都是一样的。看起来 "data" 属性缓存了数据。所以，而不是

var isAllowToEdit = $(this).data('isAllowToEdit');

我应该使用：

var isAllowToEdit = $(this).attr('data-isAllowToEdit');

另外 JSON.stringify 在我的情况下没有必要使用。

Answer 1

$('#manageEditContract').attr('data-is-allow-to-edit', JSON.stringify(data.IsAllowToEdit));

应该可行

Answer 2

您可以使用 .attr。这样你就不需要使用 JSON.stringify.

var boolValue = true;
$('#manageEditContract').attr('data-is-allow-to-edit', boolValue );

看看它是如何工作的。

var boolValue = true;
$('#manageEditContract').attr('data-is-allow-to-edit', boolValue)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="manageEditContract" data-is-allow-to-edit="false">inspect me</div>

无法使用 jquery 将布尔值设置为数据属性

Can't set bollean value to data attribute with jquery

javascript

jquery

json

custom-data-attribute