Как очистить readonly

Question

Мне нужно добавить префикс для ввода формы на основе страны и предотвратить редактирование этого префикса. Я работаю правильно, насколько это касается, но когда я переключаю страны, блок (только для чтения) не очищается. Вход очищается, но первые три столбца по-прежнему доступны только для чтения. Я просматривал темы здесь, и они в основном говорят, что используют инструкцию attr («readonly», false), но по какой-то причине это не работает. Кто-нибудь, пожалуйста, укажет на проблему?

<div> 
<label for="inputCountry">Country</label> 
<div> 
    <select name="country" id="inputCountry" onchange="SetPhonePrefix();"> 
    <option value="" selected="selected">Please Select</option> 
    <option value="84">Greece</option> 
    </select> 
</div> 
</div> 

<script> 
function SetPhonePrefix() { 
    var ctrl = document.getElementById("inputCountry"); 
    var country = ctrl.options[ctrl.selectedIndex].text; 
    var doLock = false; 

    if (country == 'Greece') { 
    document.getElementById('inputFax').value = '+30'; 
    doLock = true; 
    } else { 
    document.getElementById('inputFax').value = ''; 
    $("#inputFax").attr("readonly", false);  
    } 

    if (doLock) { 
    var readOnlyLength = $('#inputFax').val().length; 
    $('#inputFax').on('keypress, keydown', function(event) { 
     if ((event.which != 37 && (event.which != 39)) 
      && ((this.selectionStart < readOnlyLength) 
      || ((this.selectionStart == readOnlyLength) && (event.which == 8)))) { 
      return false; 
     } 
    }); 
    } 
} 
</script> 

Answer 1

readonly Не требуется readonly. Это происходит, когда вы не хотите, чтобы пользователь вводил ничего в поле. В вашем случае вы хотите ограничить ввод на вход.

С помощью классов и атрибутов данных вы можете повторно использовать код на нескольких страницах, не повторяя свой код JavaScript.

Вам нужны две функции: одна для тех случаев, когда изменяется select, а другая - при изменении input. Если вы используете $(document).on(), он будет контролировать как статические, так и динамические входы. Кроме того, используйте 'input' для отслеживания всех изменений ввода, включая копирование и вставку.

$(document).on('change', '.prefix-select', function(){ 
 
    var prefix = $(this).find(':selected').data('prefix'); 
 
    $(this).closest('form').find('.prefix-input').data('prefix', prefix).val(prefix); 
 
}); 
 
$(document).on('input', '.prefix-input', function(){ 
 
    var prefix = $(this).data('prefix'); 
 
    if($(this).val().lastIndexOf(prefix, 0) !== 0){ 
 
    $(this).val(prefix); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <select class="prefix-select"> 
 
    <option data-prefix="">Please Select</option> 
 
    <option value="84" data-prefix="+30">Greece</option> 
 
    </select> 
 
    <div> 
 
    Phone 
 
    <input type="tel" name="phone" class="prefix-input"> 
 
    </div> 
 
    <div> 
 
    Fax 
 
    <input type="tel" name="fax" class="prefix-input"> 
 
    </div> 
 
</form>

JSFiddle example