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

Question

我想这样做的原因是它会根据情况而定。如果用户登录，他们将看到下拉菜单。如果没有，他们将看到一个文本列表。理想情况下只是纯文本，但我不知道这是否可能，所以我想我可以将 <select> 转换为复选框并使用 CSS 隐藏复选框。

基本上，我们不希望未登录的用户觉得他们可以选择任何东西，因为他们将无法订购，这可能会导致挫败感。但我们仍然希望他们将每个产品的可用选项视为不可选择的文本。如果有比我想的更好的方法来做到这一点，我将不胜感激。目前，这是我拼凑在一起的，但它不会将选择更改为复选框。

我从这里抓取了一些代码作为起点：http://www.w3schools.com/jsref/met_element_setattribute.asp

另外，我无法通过 id 抓取 ，因为这将在所有 上。

<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"); 
}

这是一个小提琴：https://jsfiddle.net/d4qdekom/

Answer 1

如果我正确地理解了您的目标，您可以将 div 放入并隐藏/显示或启用/禁用 div，具体取决于用户是否登录。因此，将您的选择包装在一个 div 中，然后切换它。

这将避免尝试通过简单地显示/隐藏或启用/禁用您希望用户看到的内容来更改 html。

Answer 2

这应该将您的选择转换为复选框，前提是有一个 ID 为“容器”的 HTML 元素来附加新的复选框。

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

将选择转换为下面的复选框的 JavaScript 函数

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);
    }
}

然后您可以继续从 DOM 中删除选择。我想所有这些都应该用 JQuery 变得更容易

这是使用 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

我希望这会有所帮助。