Как заблокировать / только для чтения поле bootstrap-tagsinput при загрузке страницы?

Question

Я использую bootstrap-tagsinput . Это работает как надо.

Однако при загрузке страницы я хочу, чтобы поле bootstrap-tagsinput было доступно только для чтения (оно заблокировано и не может вводить текст).

Я написал некоторый код, который позволит заблокировать / разблокировать поле bootstrap-tagsinput, когда установлен или отключен логический флажок.

Этот код работает. Вот оно:

<script type="text/javascript">
    $(document).ready(function() {
        // lock the tags input field.
        $("#id_bootstrap_tagsinput_tag_input").attr('readonly', true);
        // when the user changes the search engine ressults option, lock / unlock the tags input..
        $('#id_resume_published_details_search_engine_results').change(function() {
            if($(this).is(":checked")) {
                // unlock the tags input field.
                $("#id_bootstrap_tagsinput_tag_input").attr('readonly', false);
            } else {
                // remove all tags before locking the input field.
                $('#id_bootstrap_tagsinput_tag_wrapper').tagsinput('removeAll');
                // lock the tags input field.
                $("#id_bootstrap_tagsinput_tag_input").attr('readonly', true);
            }
        });
    });
</script>

Однако при начальной загрузке страницы поле bootstrap-tagsinput не блокируется / только для чтения.

Кто-нибудь может подсказать, почему поле bootstrap-tagsinput не только для чтения / блокировки при загрузке страницы?

Спасибо.

[EDIT]

Я пытался использовать $("#id_bootstrap_tagsinput_tag_input").attr('disabled', 'disabled');, но это не имеет никакого эффекта.

Answer 1

Похоже, что поле bootstrap-tagsinput загружается после завершения загрузки страницы.

Поэтому я отложил применение readonly к полю bootstrap-tagsinput.

Мой код указан ниже.

Надеюсь, этот ответ кому-нибудь поможет.

<script type="text/javascript">
$(document).ready(function() {
    // lock the tags input field.
    // run this function from the setTimeout function below with a delay of 1 second.
    // the bootstrap input tag field loads after the page has loaded
    function delayInputDisable() {
      $("#id_bootstrap_tagsinput_tag_input").attr('readonly', true);
    }
    setTimeout(delayInputDisable, 1000);  // use setTimeout() to execute.
    // when the user changes the search engine ressults option, lock / unlock the tags input..
    $('#id_resume_published_details_search_engine_results').change(function() {
        if($(this).is(":checked")) {
            // unlock the tags input field.
            $("#id_bootstrap_tagsinput_tag_input").attr('readonly', false);
        } else {
            // remove all tags before locking the input field.
            $('#id_bootstrap_tagsinput_tag_wrapper').tagsinput('removeAll');
            // lock the tags input field.
            $("#id_bootstrap_tagsinput_tag_input").attr('readonly', true);
        }
    });
});

Answer 2

Это то, что мне всегда кажется лучшим:

$("#id_bootstrap_tagsinput_tag_input").prop('disabled', true);

И, конечно, обратное включение:

$("#id_bootstrap_tagsinput_tag_input").prop('disabled', false);