jquery.ajax-combobox
Version:
jQuery plugin to create a text box which can auto-complete and pull-down-select.
67 lines (65 loc) • 2 kB
HTML
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Sample: Disable Combobox (using option.instance)</title>
<link rel="stylesheet" href="../../dist/jquery.ajax-combobox.css">
<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../../dist/jquery.ajax-combobox.min.js"></script>
<script>
$(function () {
/**
* ComboBox
*/
var arr_instance = $("#foo").ajaxComboBox(
"../../dist/jquery.ajax-combobox.php",
{
button_img: "../../dist/btn.png",
db_table: "nation",
lang: "en",
instance: true // important!
}
);
/**
* Checkbox
*/
$("#disable-combobox").on("change", function (elem) {
if ($(elem.target).prop("checked")) {
$(arr_instance).each(function() {
// disable text-box
$(this.elem.combo_input)
.prop("disabled", true)
.css("background-color", "#ccc");
// disable button
$(this.elem.button)
.off("mouseup mouseover mouseout")
.css("background-image", "linear-gradient(to bottom, #ccc, #bbb)");
});
} else {
$(arr_instance).each(function() {
// enable text-box
$(this.elem.combo_input)
.prop("disabled", false)
.css("background-color", "white");
// enable button
this._ehButton();
$(this.elem.button).css("background-image", "linear-gradient(to bottom, #eeffff, #99aabb)");
});
}
});
});
</script>
</head>
<body>
<h1>Sample: Disable Combobox (using option.instance)</h1>
<ul>
<li><a href="https://github.com/sutara79/jquery.ajax-combobox/tree/master/sample/disable">Source Code (GitHub)</a></li>
</ul>
<input type="checkbox" id="disable-combobox"><label for="disable-combobox">Disable ComboBox</label>
<form action="send.php" method="post">
<input id="foo" name="foo" type="text">
<p><button type="submit">Send</button></p>
</form>
</body>
</html>