-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でこれを行うにはどうすればよいですか?誰かが助けてくれますか?

注: このような ul のセットがフォームに 5 つあります。

4

3 に答える 3

1

を使用parentNodeしてからnextSibling(そしてfirstChild、入力が [正しく] にあるので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 ですべて読むことができます。

ここで、上記は、ラジオ ボタンが常に の直接の子であると想定していますが、lijQueryclosestは想定していません。しかし、それはあなたの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 の中に移動しました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
    }
}

デモ:フィドル

于 2013-09-12T12:05:20.957 に答える