使复制的值在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（“disabled”，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> 
<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

点击按钮后，您需要在输入字段中添加readonly属性。

像这样：

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