JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.css">
<p>Select2 does not read initial attribute readonly</p>
<div><label>Select with Prop readonly</label>
    <select class="red" readonly>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>
<div><label>Select with Prop readonly="true"</label>
    <select class="red" readonly="true">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>
<div><label>Select with Prop readonly="readonly"</label>
    <select class="red" readonly="readonly">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>
<div><label>Select with Prop readonly="bla"</label>
    <select class="red" readonly="bla">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>
<hr>    
    <div><label>Select with Prop disabled</label>
    <select class="dis" disabled>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>
<div><label>Select with Prop disabled="true"</label>
    <select class="dis" disabled="true">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>
<div><label>Select with Prop disabled="disabled"</label>
    <select class="dis" disabled="disabled">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>
<hr>
       
    
<p> Since select2 is using prop for detecting readonly attribute its messing up.</p>
<p>You can see the prop is detecting readonly as false but it should detect it as true. (like the disabled attribute) </p>
<div id="select-list"></div>

CSS

body{font-family:sans-serif;}

JavaScript

$("select").select2();


var selred = $("select.red");
var seldis = $("select.dis");
var slist = $("#select-list");

slist.append("<h4>readonly attribute</h4>");
selred.each(function(){
    var sel = $(this);    
    slist.append('Using prop:'+sel.prop("readonly")+'<br>');    
});
selred.each(function(){
    var sel = $(this);    
    slist.append('Using attr:'+sel.attr("readonly")+'<br>');    
});

slist.append("<h4>disabled attribute</h4>");
seldis.each(function(){
    var sel = $(this);    
    slist.append('Using prop:'+sel.prop("disabled")+'<br>');
});
seldis.each(function(){
    var sel = $(this);    
    slist.append('Using attr:'+sel.attr("disabled")+'<br>');   
});
;
slist.append("<hr><h4>Add dynamicly</h4>");

slist.append('<select class="dyn"><option>A</option><option>B</option readonly><option>C</option disabled></select><br><button class="but-read">toggle readonly</button>');

$('.dyn').select2();

$(".but-read").on('click',function(){
    if(!$(this).prop("toggle")){
        $('.dyn').select2("readonly", true); 
        $(this).prop("toggle",true);
    }else{
         $(this).prop("toggle",false);
        $('.dyn').select2("readonly", false);
    }
});