Question

如何在readonly

时禁用bootstap typahead数据源

<input type="text" data-provide="typeahead" data-source="["Option 1","Option 2","Option 3"]" id="test1" name="test1">
<a href="#" class="btn" id="readonly">Readonly</a>

现在我使用jquery来应用readonly但是当我们按回空格时它会建议数据源中的最后一个元素

$('#readonly').on('click', function (e) {
    $("#test1").prop('readonly', true);
})

Answer 1

如果您想要readonly输入元素。然后addclass禁用

$('#readonly').on('click', function (e) {
   $("#test1").prop('readonly', true).addClass("disabled");
})

Answer 2

如果你不关心在禁用输入时保持typeahead.js功能，你可以像这样销毁typeahead：

$('#textbox').typeahead('destroy');

这将重置/删除typeahead.js可能已添加的任何属性/样式。如果以后想要添加回typeahead.js功能，可以使用以下命令重新初始化它：

$('#textbox').typeahead({ /* configs */ });

Answer 3

谢谢你们根据你的建议和答案，我得到了解决方案

$('#readonly').on('click', function (e) {
   $("#test1").prop('readonly', true); 

   var typeahead = $("#test1").data('typeahead'); //Get Typehead Object
   if (typeahead) typeahead.source = '';
   else $("#test1").typeahead({source: ''});

})

//当readonly为false时;

var list = ["Option 1","Option 2","Option 3"];
var typeahead = $("#test1").data('typeahead'); //Get Typehead Object
if (typeahead) typeahead.source = list;
else $("#test1").typeahead({source: list});

如何禁用Bootstrap的预先输入数据源？

3 个答案: