在输入字段中切换readonly属性

Question

我创建了一个表单.这是小提琴

默认情况下,所有字段都处于只读状态.我需要做的是

1. 当用户点击Edit button并编辑按钮(名称和值)时,激活文本字段进行编辑SAVE button.

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

最好寻找jquery解决方案.

预先感谢!!

Answer 1

获取具有名称的所有元素Edit并附加单击处理程序.变量prev是前一个输入元素,ro是元素readonly属性state(true/false).

然后我们将只读状态设置为! 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小提琴演示。