如何在页面加载时 lock/readonly bootstrap-tagsinput 字段？

Question

我正在使用 bootstrap-tagsinput。这是正常工作。

但是，当页面加载时，我希望 bootstrap-tagsinput 字段为只读（已锁定且无法输入文本）。

我写了一些代码，当布尔复选框为 checked/unchecked.

时，允许 bootstrap-tagsinput 字段为 locked/unlocked

此代码有效。这是：

<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 字段不是 locked/readonly。

谁能提出为什么 bootstrap-tagsinput 字段在页面加载时不是 readonly/locked 的原因？

谢谢。

[编辑]

我试过使用 $("#id_bootstrap_tagsinput_tag_input").attr('disabled', 'disabled'); 但这没有效果。

Answer 1

这似乎总是最适合我：

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

当然，反向重新启用：

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

Answer 2

似乎 bootstrap-tagsinput 字段在页面加载完成后加载。

所以我延迟将只读应用于 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);
        }
    });
});

如何在页面加载时 lock/readonly bootstrap-tagsinput 字段？

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

tags

jquery

twitter-bootstrap

bootstrap-tags-input