javascript禁用单个单选按钮 [英] javascript disable a single radio button

问题描述

我有一个简单的解决方案应该是什么问题，我确定我只是遗漏了一些东西.

I have what should be a problem with a simple solution, and I'm sure I'm just missing something.

我有两列单选按钮，当点击一列中的单选按钮时，我需要禁用相对列中对应的单选按钮，因此无法选择.然后，如果选择了另一个按钮，请重新启用上一个按钮并禁用新的对立选择.

I have 2 columns of radio buttons, and when a radio button from a column is clicked, I need to disable the corresponding radio button from the opposite column, so it can't be selected. Then if another button is selected, re-enable the previous button and disable the new opposite selection.

我为所有单选按钮指定了唯一 ID.第一列的 first1、first2 等，第二列的 second1、second2 等.

I have given all the radio buttons a unique id. first1, first2, etc. for column one, and second1, second2 etc. for column two.

重新思考后，我走向的方式行不通，在网上搜索了一个小时后，我还没有找到非 jquery 的方法.可以用javascript吗?

The way I was headed towards won't work after re-thinking this, and after searching online for an hour, I haven't found a non-jquery way of doing it. Is it possible with javascript?

到目前为止我所拥有的，我知道我离基础很远，但我对这个页面遇到的不同问题感到筋疲力尽:

What I had so far, and I know I'm way off base, but I'm burnt out with the different problems I've had with this page:

function disableForm(theform, theradio) {
    //this was a start but does't save valid disabled fields
    //it just enables everything
    if (document.all || document.getElementById) {
        for (i = 0; i < theform.length; i++) {
        var formElement = theform.elements[i];
            if (true) {
                formElement.disabled = false;
            }
        }

    }

    document.getElementById(theradio).onclick = function(){
        document.getElementById(theradio).disabled=true;
    }
}

推荐答案

假设您将收音机定义为

<table style="width: 100%;">
        <tr>
            <td>
                <input id="Radio1_1" type="radio" name="Radio1" onchange="process(this)"/><br />
                <input id="Radio1_2" type="radio" name="Radio1" onchange="process(this)"/><br />
                <input id="Radio1_3" type="radio" name="Radio1" onchange="process(this)"/><br />
                <input id="Radio1_4" type="radio" name="Radio1" onchange="process(this)"/><br />
                <input id="Radio1_5" type="radio" name="Radio1" onchange="process(this)"/>
            </td>
            <td>
                <input id="Radio2_1" type="radio" name="Radio2" /><br />
                <input id="Radio2_2" type="radio" name="Radio2" /><br />
                <input id="Radio2_3" type="radio" name="Radio2" /><br />
                <input id="Radio2_4" type="radio" name="Radio2" /><br />
                <input id="Radio2_5" type="radio" name="Radio2" />

            </td>

        </tr>

    </table>

那么这个目标就可以通过一个简单的脚本来实现:

Then the goal can be achieved by a simple script:

 function process(rb) {

   //clearing previos disabled
   for (i = 0; i < document.getElementsByName("Radio2").length; i++) {
       document.getElementsByName("Radio2")[i].disabled = '';
   }
   document.getElementById(rb.id.replace('Radio1','Radio2')).disabled='disabled';
 }

工作示例:http://jsfiddle.net/bbGDA/1/

这篇关于javascript禁用单个单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！