How to lock/readonly bootstrap-tagsinput field when page loads?

I am using bootstrap-tagsinput. This is working as it should.

However, when the page loads, I want the bootstrap-tagsinput field to be readonly (that is locked and not able to enter text).

I have written some code that will allow the bootstrap-tagsinput field to be locked/unlocked when a boolean check box is checked/unchecked.

This code is working. Here it is:

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

However, when the page initially loads, the bootstrap-tagsinput field is not locked/readonly.

Can anyone suggest why the bootstrap-tagsinput field is not readonly/locked when the page loads?

Thanks.

[EDIT]

I have tried using $("#id_bootstrap_tagsinput_tag_input").attr('disabled', 'disabled'); but this has no effect.

It appears the that bootstrap-tagsinput field loads after the page load is completed.

So I placed a delay on applying the readonly to the bootstrap-tagsinput field.

My code is below.

I hope this answer helps someone.

<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);
        }
    });
});