如何使用一个按钮编辑和保存使用Javascript

How to use one button to Edit and Save Using Javascript

本文关键字：编辑 保存 Javascript 按钮 一个 何使用      更新时间：2023-09-26

我有一个按钮，我希望它能执行两种不同的功能。第一次单击它时启用文本框，第二次单击时，它必须保存数据并禁用所有文本框，并将名称更改为原始名称。

按钮名称为"更新和保存"。

当你第一次运行应用程序时，文本框被禁用，按钮名称被称为"更新"，当我单击它时，它会启用所有文本框，并将其名称更改为"保存"。到目前为止，这是有效的。

问题是，当我想禁用文本框时，当我单击"保存"时，它不会禁用文本框。我想知道我是否能够使用这种方法保存数据优势和劣势。如果你知道的话，你可以举一个我如何储蓄的例子。

代码

<input  type="button" class="btn btn-success btn-sm pull-left" value="Update" onclick="EventChanger(this)" id="btnUS" />     
<script type="text/javascript">
   var elem = document.getElementById("btnUS");
    if (elem.value == "Update")
    {
        elem.value = "Save";
        $('#txtContactName').removeAttr('disabled', true);
        $('#txtIdentityNumber').removeAttr('disabled', true);
        $('#txtSuburb').removeAttr('disabled', true); 
        $('#txtCellNumber').removeAttr('disabled', false);  
    }
    else if(elem.value == "Save")
    {
        elem.value = "Update";
        $('#txtContactName').removeAttr('disabled', false);
        $('#txtIdentityNumber').removeAttr('disabled', false);
        $('#txtSuburb').removeAttr('disabled', false);
        $('#txtCellNumber').removeAttr('disabled', false);        
    }
</script>

感谢先进的

使用prop()而不是removeAttr()jquery官方网站：

注意：使用.removeAttr（）删除内联onclick事件处理程序在Internet Explorer 6、7或8中未达到预期效果。到为了避免潜在的问题，请改用.pr（）：

<input  type="button" class="btn btn-success btn-sm pull-left" value="Update" onclick="EventChanger(this)" id="btnUS" />     
<script type="text/javascript">
   var elem = $("#btnUS");
     if (elem.val() == "Update")
    {
       elem.val("Save");

        $('#txtContactName').prop('disabled', true);
        $('#txtIdentityNumber').prop('disabled', true);
        $('#txtSuburb').prop('disabled', true); 
        $('#txtCellNumber').prop('disabled', false);  
    }
    else if(elem.val() == "Save")
    {
         elem.val("Update");
        $('#txtContactName').prop('disabled', false);
        $('#txtIdentityNumber').prop('disabled', false);
        $('#txtSuburb').prop('disabled', false);
        $('#txtCellNumber').prop('disabled', false);        
    }
</script>
相关文章：