Question

我有一个表格，其中包含以下部分：

<ul class="fb-a-col">
     <li><input name="cust_occupation" type="radio" value="Business" class="" /><label>Business</label> </li>
     <li><input name="cust_occupation" type="radio" value="Salaried Person" class="" /><label>Salaried Person</label>   </li>
     <li><input name="cust_occupation" type="radio" value="Agriculture" class="" /><label>Agriculture</label>   </li>
     <li><input name="cust_occupation" type="radio" value="Student" class="" /><label>Student </label>  </li>
     <li><input name="cust_occupation" type="radio" value="Home Maker" class="" /><label>Home Maker</label> </li>
     <li><input name="cust_occupation" type="radio" value="Others" class="" onclick="release(this)" /><label>Others</label> </li>
     <li><input name="cust_occupation_others" id="cust_occupation_others" type="text" class="readonly" disabled="disabled" /></li>
</ul>

当我点击“其他”选项时，它应该使用class =“readonly”删除下一个文本框的“禁用”属性。

我想在没有jQuery的情况下这样做，所以我怎么能用纯javascript做到这一点，有人可以帮忙吗？

请注意：我在表格中有5组这样的ul。

Answer 1

使用parentNode然后nextSibling（然后firstChild，现在输入是[{1}}中的[corectly]）：

li

您可以在此处阅读有关DOM的所有内容：http://www.w3.org/DOM/DOMTR

现在，上面假设单选按钮将始终是function release(element) { // Get the radio button's parent's next sibling var elm = element.parentNode.nextSibling; // Skip any intervening text nodes while (elm && elm.nodeType !== 1) { elm = elm.nextSibling; } // If we found the `li`, enable the `input` inside it if (elm) { elm.firstChild.disabled = false; } }的直接子节点，jQuery的li没有假设。但是HTML就是这种情况。如果不是，你只需要使用一个循环：

closest

Answer 2

最后一个input不在li内，我已将其移到了小提琴中的li

function findEl(curr, path){
    while(curr && curr.nodeType != 1){
        curr = curr[path]
    }
    return curr;
}

function release(el){
    if(el.checked){
        var next = findEl(el.parentNode.nextSibling, 'nextSibling');
        var inp = findEl(next.firstChild, 'nextSibling');
        inp.disabled = false
    }
}

演示：Fiddle

Answer 3

jQuery的closest函数遍历祖先，看起来你想要通过DOM中较低的兄弟姐妹。

当我点击“其他”选项时，应删除“已禁用” class =“readonly”的下一个文本框的属性。

“其他”是一个单选按钮。检查完毕后，您希望在DOM中找到“readonly”类的下一个输入元素。

您的标记无效，输入元素不能是LI元素或UL子节点的兄弟，因此浏览器错误更正可能会将输入移到UL之后，生成的DOM片段如下：

<ul class="fb-a-col">
     <li><input name="cust_occupation" type="radio" ...>
     <li><input name="cust_occupation" type="radio" value="Others"
         onclick="release(this)"><label>Others</label>
</ul>
<input name="cust_occupation_others" id="cust_occupation_others" type="text"
 class="readonly" disabled="disabled">

所以你想要得到的是UL的下一个元素兄弟，可以在特定情况下完成：

function release(el) {
   var li = el.parentNode;
   var ul = li.parentNode;
   var re = /(^|\s)readonly(\s|$)/;

   do {
     ul = ul.nextSibling;
     if (ul && ul.nodeType == 1 && re.test(ul.className)) {
       return ul;
     }
  } while (ul)
}

另一种策略是获取文档中的所有输入元素，找到被单击的元素，然后使用类 readonly返回下一个：

function release(el) {
   var inputs = document.getElementsByTagName('input');
   var re = /(^|\s)readonly(\s|$)/;
   var start = false;
   var input;

   for (var i=0, iLen=inputs.length; i<iLen; i++) {
     input = inputs[i];

     if (input == el) {
       start = true;
     }
     if (start) {
       if (re.test(input.className)) {
         return input;
       }
     }
   }
}

您可以使用querySelectorAll使用类似的策略，但 getElementsByTagName 得到更广泛的支持和充分。

如何通过单击附近的单选按钮来删除文本框的已禁用属性？

3 个答案: