jquery - 使用 JQuery 在单击提交按钮时使文本输入可编辑和不可编辑

Question

我有一个要求，我需要在使用“提交”按钮提交表单时从数据库中填充文本输入字段的结果，同时使输入字段不可编辑。我目前有一个 JQuery 函数来执行此操作：

$(function(){
    $(".makeEditable").click(function(){
        $('input:text').removeAttr("readonly");    
    });
    $(".makeNonEditable").click(function(){
        $('input:text').attr("readonly", "readonly");    
    });               
})

当我用一个按钮测试它时，这个功能可以正常工作：

<input type="button" value="Make Non Editable" class="makeNonEditable" />

但是，这不适用于提交按钮：

<input type="submit" value="Search" class="makeNonEditable"/> 

所以，我不明白为什么它不适用于提交按钮但适用于普通按钮。任何帮助将不胜感激

Answer 1

从您的帖子看来，您的两个按钮都具有相同的类makeNonEditable

您可以将readonly文本字段的属性设置为默认值

<input type="text" value="" readonly="readonly">

提交按钮应更改为：

    $(function() {
       $(".makeEditable").click(function() {
            $('input:text').removeAttr("readonly");
       });
       $(".makeNonEditable").click(function(e) {

                // If you submit the for without ajax
                // then just make the text field default readonly="readonly"

            // OR

                // If you submit the form using ajax then use
                // $('input:text').removeAttr("readonly");
                // within success function
       });
   });

Answer 2

我不知道是不是这样，但是提交类型发送一个表单的数据并重新加载页面。尝试使用：

$('#yourForm').submit(function(){
  // do something...
});