Smart-select readonly or disabled


I’m trying to find a way to display a smart-select component but disabled. Then when the user will click on an update button, the smart-select will be enabled. I cannot find how to do this.

I tried to set readonly on the smart-select html element and on the select tag but when I click on it, we still have the page opened to choose the value.

I also tried to change the click event and run “preventdefault” or app.smartSelect.close(mysmartselect) but no luck.

Any idea how to do this? Thank you.

Try to add class “disabled” to smart select link:

<a class="item-link smart-select disabled">...

And then just remove "disabled’ class for it


Many thanks for your help! It is working

Thanks @nolimits4web,

Great help, in my case, I added the disabled attribute and working perfectly, using Smart Select.

<select name="" id="" class="input-with-value">
	<option value="1" disabled>Item</option>
	<option value="2" disabled>Item</option>
	<option value="3" disabled>Item</option>
	<option value="4" disabled>Item</option>
	<option value="5" disabled>Item</option>
	<option value="6" disabled>Item</option>
	<option value="7">Select me</option>
	<option value="8">Select me</option>
	<option value="9">Select me</option>
	<option value="10" disabled>Item</option>
	<option value="11" disabled>Item</option>
	<option value="12" disabled>Item</option>