禁用编辑内联文本

时间:2014-08-25 10:48:41

标签: javascript jquery

我有一个内联可编辑的字段。我使用jQuery;

$el.on("click", ".editableTxt", function () {
    var currElmModelId = $(this).attr('data-model-id');
    var currElmModelAttr = $(this).attr('data-model-attr');
    var input = $('<input />', {
        'type': 'text',
        'name': currElmModelAttr,
        'data-model-id': currElmModelId,
        'data-model-attr': currElmModelAttr,
        'class': 'editBox',
        'style': 'width:60px',
        'value': $(this).html()
    });
    $(this).parent().append(input);
    $(this).remove();
    input.focus();
});

我的问题是我需要为此添加一个特权检查...所以有两种可能性(查看和更新​​)

因此,如果用户只有查看priv,他只会看到静态文本,如果他点击文本就不会发生任何事情。 但是如果用户具有Update priv,他将看到静态文本,并且在单击时,上面的jquery函数应该触发,他应该能够使用内联文本进行编辑。

将上述代码与上述代码相结合的最佳方法是什么?

2 个答案:

答案 0 :(得分:1)

取决于如何检查权限,并且可以使用简单的if块来处理

var editPermissions = true; //false depending on the permission
$("#html").on("click", ".editableTxt", function () {
if (editPermissions) {
    var currElmModelId = $(this).attr('data-model-id');
    var currElmModelAttr = $(this).attr('data-model-attr');
    var input = $('<input />', {
        'type': 'text',
            'name': currElmModelAttr,
            'data-model-id': currElmModelId,
            'data-model-attr': currElmModelAttr,
            'class': 'editBox',
            'style': 'width:60px',
            'value': $(this).html()
    });
    $(this).parent().append(input);
    $(this).remove();
    input.focus();
}
});

答案 1 :(得分:0)

你的匿名函数需要某种方式来知道它是否应该在没有编辑的情况下返回。

如果用户没有该权限,则在生成disabled时,可以设置<input>属性。

javascript函数可以具有:

if ($(this).attr('disabled'))
    return;

确保在数据进入时检查服务器端的权限,因为恶意用户可能会改变浏览器端的字段而不管您的努力。