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

【问题标题】：Making text input editable and non-editable on clicking Submit button using JQuery使用 JQuery 在单击提交按钮时使文本输入可编辑和不可编辑
【发布时间】：2012-04-29 17:49:10
【问题描述】：

我有一个要求，我需要在使用“提交”按钮提交表单时从数据库中填充文本输入字段的结果，同时使输入字段不可编辑。我目前有一个 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"/>

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

【问题讨论】：

点击提交按钮会发生什么？
您是否以编程方式提交表单？发布一些您的实际 HTML。

标签： jquery html

【解决方案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
       });
   });

【讨论】：

您已添加 e.preventDefault() - 我的评论告诉您需要将 e 传递给函数...仅此而已，仅此而已...（您的代码仍然无法正常工作。 .. 测试一下）
谢谢，使用 e.preventDefault() 确实使该字段不可编辑，但现在提交按钮没有从数据库中检索任何结果。普通按钮仅用于测试目的，提交按钮是提交表单以从数据库中检索结果同时使输入字段不可编辑的按钮。
关于删除 e.preventDefault() 但是不会使输入字段不可编辑。它检索结果，但输入字段仍可编辑。
@theCodeParadox 哪个解决方案？
@theCodeParadox 这使得字段不可编辑但不提交表单以检索结果

【解决方案2】：

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

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

【讨论】：