Change select to check boxes using javascript

The reason I would like to do this, is that it will be situational. If a user is logged in, they will see drop downs. If not, they will see a list of text. Ideally just plain text, but I don't know if that's possible, so I was thinking I could convert the < select > to checkboxes and hide the check boxes with CSS.

Basically we don't want a user who isn't logged in to feel they can select anything, because they won't be able to order and this could lead to frustration. But we would still like them to view what options are available for each product as unselectable text. If there is a better way to do this than what I'm thinking, I'd be grateful for suggestions. For now, this is what I've patched together, but it's not changing the select to checkboxes.

I grabbed some code from here to use as a starting point: http://ift.tt/1nwavY7

Also, I can't grab the < select > by id, because this will be on all < select >'s.

<select id="unique_id" class="unique_class"  data-attribute_name="unique_attribute_name" name="unique_name">
    <option value="" selected="selected">Choose an option</option>
    <option class="attached enabled" value="516">5/16"</option>
    <option class="attached enabled" value="38">3/8"</option>
</select>

Javascript:

function myFunction() {
    document.getElementsByTagName("SELECT")[0].setAttribute("type", "checkbox"); 
}

Here is a fiddle: http://ift.tt/1LXi7Sy