Question

我创建了一个表单。这是 fiddle

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

在使用时单击Edit button并编辑按钮（名称和值）应变为SAVE button，激活要编辑的文本字段。
完成编辑后，用户应点击Save button，它应该再次执行第一步，意味着将按钮更改回原始状态，即Edit，将文本字段更改为{{ 1}}

最好寻找jquery解决方案。

提前感谢!!

Answer 1

获取名称为Edit的所有元素，并附加单击处理程序。变量prev是前一个输入元素，ro是元素readonly属性state（true / false）。

然后我们将只读状态设置为! ro（不是ro），这意味着“将其设置为与当前相反的状态（如果愿意，则设置为切换功能）”，并将{ {1}}输入。

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

ro

FIDDLE

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

并提供更改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 Fiddle demo

在输入字段中切换readonly属性

2 个答案: