ListBox with bootstrap select items are missing when disabled this control

Question

I have a listbox which I populate on page load, and I used bootstrap select. It works fine. And now the problem is I need to disable this listbox/bootsrap select on document ready and ENABLE it once the user clicked the button beside it. I got it disabled on page load / document ready but when I enable it , the items/options are not there when I do inspect element.

    //the html of the listbox
   <asp:ListBox ID="ListBox1" SelectionMode="Multiple"  class="selectpicker form-control productLoadFields" data-live-search="true"
    multiple name="named[]" title="Select Branch" runat="server" AppendDataBoundItems="True">
    <asp:ListItem Text="Select All" Value="all"></asp:ListItem></asp:ListBox>

//Populate listbox

                ListBox1.DataSource = dataTable.dbdata(sqlBranch, 1, "");
                ListBox1.DataTextField = "BranchName";
                ListBox1.DataValueField = "BranchID";
                ListBox1.DataBind();

//

       function disableControl() {
       $('.productLoadFields').prop("disabled", true);
       }

If I don't disable this ListBox, the items are there. Any help will be appreciated.