複印製成值不是在JavaScript

Question

多變或編輯我在Java腳本

1. 的要求時，我有一個字段的值複製到另一個字段的值。
2. 一旦在另一個字段中複製了相同的值，就可以單擊一個按鈕來創建複製的值，以使其無法更改，甚至無法編輯。

對於第一個我已經完成。

<input type='text' id='field_1'></br> 
<input type='text' id='field_2'> </br>  

$(document).ready(function() { 
    $('#field_1').on('change', function (e) { 
     $('#field_2').val($('#field_1').val()); 
    }); 
}); 

Answer 1

可以綁定一個單擊處理程序，以您的按鈕將使用unbind()解除綁定你的第一個輸入。它也可以使第二個輸入只讀使用.prop("readonly",true);並且可以使用1.prop（ 「已禁用」，真）禁用本身;`

像這樣：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='text' id='field_1'></br> 
 
<input type='text' id='field_2'> </br> 
 
<input type='button' id='btnReadOnly' value="Make Readonly"> 
 

 
<script> 
 
$(document).ready(function() { 
 
    $('#field_1').change(function (e) { 
 
     $('#field_2').val($('#field_1').val()); 
 
    }); 
 
    $('#btnReadOnly').click(function() { 
 
     $('#field_1').unbind(); 
 
     $('#field_2').prop("readonly",true).css("background-color","#dddddd"); 
 
      
 
     $('#btnReadOnly').prop("disabled", true); 
 
    }); 
 
}); 
 
</script>

Answer 2

您需要點擊您的按鈕，將只讀屬性添加到您的輸入字段。

像這樣：

$(document).ready(function() { 
 
    $("#not_editable").hide(); 
 
    $('#field_1').on('change', function (e) { 
 
     $('#field_2').val($('#field_1').val()); 
 
     if($(this).val()!='') 
 
     { 
 
     $("#not_editable").show(); 
 
     } 
 
    }); 
 
    $("#not_editable").click(function(){ 
 
     $('#field_1').prop("readonly",true); 
 
     $('#field_2').prop("readonly",true); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='text' id='field_1'></br> 
 
<input type='text' id='field_2'> </br>  
 

 
<button id="not_editable" type="button">Mark Un-editable</button>