如何使用一個按鈕來編輯和保存使用Javascript

Question

我有一個按鈕，我希望它執行兩個不同的功能。第一次單擊時啓用文本框，其次單擊時必須保存數據並禁用所有文本框並將名稱更改爲原始文本框。

按鈕名稱是更新和保存。

當您第一次運行應用程序時，文本框被禁用，並且按鈕名稱被稱爲「更新」，當我單擊它時啓用所有文本框並將其名稱更改爲保存。這工作到目前爲止。

問題是當我想禁用文本框，當我點擊「保存」它不禁用文本框。我想知道如果我將能夠使用這種方法保存數據的優點和缺點。如果你知道的話，你可以舉例說明我可以如何拯救。

代碼

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

在先進的感謝

Answer 1

使用prop()代替removeAttr() jQuery的官方網站：

注意：刪除使用.removeAttr內聯onclick事件處理程序（） 沒有按在Internet Explorer 6,7或8中無法達到預期效果。至 avoi d的潛在問題，使用.prop（）代替：

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