使用javascript将选择更改为复选框

Question

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://www.w3schools.com/jsref/met_element_setattribute.asp

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: https://jsfiddle.net/d4qdekom/

Answer 1

If I am understanding your goal correctly, you can just put div's in and hide/show or enable/disable the div's depending on if the user is logged in or not. So wrap your select up in a div and just toggle that.

This would avoid trying to change the html by simply showing/hiding or enabling/disabling what you want the user to see.

Answer 2

This should convert your select to checkboxes, provided there is an HTML element with an id of "container" to append the new checkboxes.

This is the HTML

<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>

<div id="container"></div>

The JavaScript function to transform the select to checkboxes below

function myFunction() {
    var select = document.getElementById('unique_id');
    var container = document.getElementById('container'); 
    var i;
    for (i = 0; i < select.length; i++) {
        var checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.name = 'option';
        checkbox.id = 'randomId' + i;
        checkbox.value = select.options[i].text;
        var label = document.createElement('label')
        label.htmlFor = 'randomId' + i;
        label.appendChild(document.createTextNode(select.options[i].text));
        container.appendChild(checkbox);
        container.appendChild(label);
    }
}

You can then go ahead and remove the select from the DOM. I guess all these should be made easier with JQuery

This is an update using getElementsByTagName:

var selects = x.getElementsByTagName('SELECT');  // this is a node list
for (var i = 0; i < y.length; i++) {
  var select = selects[i]; // this is a single select element
  // You can call the above function on each select here...
}

This is a working jsFiddle

I hope this helps.