jquery - 在输入字段中切换只读属性

Question

我创建了一个表格。这是小提琴

默认情况下，所有字段都处于只读状态。我需要在这里做的是

1. 使用单击Edit button和编辑按钮（名称和值）时激活要编辑的文本字段应变为SAVE button.

2. 编辑完成后，用户应该点击Save button它，它应该再次执行第一步，这意味着将按钮更改回原始状态Edit，即文本字段为readonly

最好寻找 jquery 解决方案。

预先感谢！！

Answer 1

获取具有名称的所有元素Edit并附加一个单击处理程序。该变量prev是前一个输入元素并且ro是那个元素的只读属性状态（真/假）。

然后我们将只读状态设置为! ro（不是 ro），这只是意味着“将其设置为与当前状态相反的状态（如果您愿意，可以使用切换功能）”，并聚焦prev输入。

最后一行以当前单击的按钮为目标this，并根据ro变量的状态使用三元运算符更改其文本。

$('[name="Edit"]').on('click', function() {
    var prev = $(this).prev('input'),
        ro   = prev.prop('readonly');
    prev.prop('readonly', !ro).focus();
    $(this).val(ro ? 'Save' : 'Edit');
});

小提琴

Answer 2

最简单的：

// binds a click-handler to inputs whose `name` attribute is equal to 'Edit':
$('input[name="Edit"]').click(function(){
    // when the input is clicked, it looks to the previous input element
    // that has a `required` attribute, and sets its `readonly` property,
    // the `r` is the current readonly state (true or false)
    $(this).prev('input[required]').prop('readonly',function(i,r){
        // returns the value as the opposite  of what it currently is
        // if readonly is false, then it returns true (and vice-versa)
        return !r;
    });
});

JS 小提琴演示。

并提供更改的文本button：

$('input[name="Edit"]').click(function(){
    $(this)
    .val(function(i,v){
        return v === 'Edit' ? 'Finished' : 'Edit';
    })
    .prev('input[required]')
    .prop('readonly',function(i,r){
        return !r;
    });
});

JS 小提琴演示。