-3

我有一个包含以下部分的表格：

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

4

3 回答 3

1

使用parentNodeand then nextSibling（然后firstChild，现在输入 [正确] 在 an 中li）：

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

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

现在，上面假定单选按钮将始终是 的直接子级li，而 jQueryclosest不假定。但在您的 HTML 中就是这种情况。如果不是，您只需使用循环：

var input = element;
while (input && input.tagName.toUpperCase() !== "LI") {
    input = input.parentNode;
    if (input && input.tagName.toUpperCase() === "HTML") {
        input = null;
    }
}
// Input is either null or the closest LI
于 2013-09-12T12:03:14.907 回答
1

最后一个input不在 a 里面li，我把它移到了 a liin the fiddle

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

演示：小提琴

于 2013-09-12T12:05:20.957 回答
1

jQuery最接近的函数通过祖先，看起来你想通过 DOM 中较低的兄弟姐妹。

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

“其他”是一个单选按钮。当它被选中时，你想在 DOM 中找到下一个具有“只读”类的输入元素。

您的标记无效，输入元素不能是 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得到更广泛的支持和足够的支持。

于 2013-09-12T12:30:30.327 回答