单击单选按钮时禁用文本框答案

【问题标题】：Disable textbox on radio button click单击单选按钮时禁用文本框
【发布时间】：2013-06-22 17:11:23
【问题描述】：

我有两个单选按钮。每个单选按钮有两个 TextBox 我只想这样做，如果单击第一个单选按钮，则应禁用包含文本框的其他单选按钮，反之亦然。

【问题讨论】：

请提供代码和/或 jsfiddle。
实际上我现在无法提供代码，因为该代码在我的办公室桌面上。我刚刚在办公室坚持这种情况。

【解决方案1】：

你可以使用 jquery 点击事件，结合 :checked 过滤器

<div>
    <label for="radio1">
         <input type="radio" name="test" value="radio1" /> Radio 1
    </label>
    <input type="text" name="for_radio1[]" class="radio1" disabled="true" />
    <input type="text" name="for_radio1[]" class="radio1" disabled="true" />
    <label for="radio2">
       <input type="radio" name="test" value="radio2" /> Radio 2
    </label>
    <input type="text" name="for_radio2[]" class="radio2" disabled="true" />
    <input type="text" name="for_radio2[]" class="radio2" disabled="true" />
</div>

这里是js

$(document).ready(function(){
$('input[type=radio][name=test]').click(function(){
    var related_class=$(this).val();
    $('.'+related_class).prop('disabled',false);

    $('input[type=radio][name=test]').not(':checked').each(function(){
        var other_class=$(this).val();
        $('.'+other_class).prop('disabled',true);
    });
});
});

【讨论】：

【解决方案2】：

例子：

HTML

<form id="myform" name="myform" action="" method="post">
    <input type="radio" name="group1" value="Milk" checked="checked" />Milk
    <input type="text" name="text1" value="milk1" />
    <input type="text" name="text2" value="milk2" />
    <br/>
    <input type="radio" name="group1" value="Cheese" />Cheese
    <input type="text" name="text3" value="cheese1" disabled="disabled" />
    <input type="text" name="text4" value="cheese2" disabled="disabled" />
</form>

Javascript

var form = document.forms['myform'];
form.group1[0].onfocus = function () {
    form.text1.disabled = form.text2.disabled = false;
    form.text3.disabled = form.text4.disabled = true;
}
form.group1[1].onfocus = function () {
    form.text1.disabled = form.text2.disabled = true;
    form.text3.disabled = form.text4.disabled = false;
}

jsfiddle

【讨论】：

【解决方案3】：

这是你的意思吗？

http://jsfiddle.net/UuwVG/

HTML：

<input type="radio" id="textbox1" onclick="check(this.id)" checked="true" />
<textarea id="textarea1"></textarea>
<br>
<input type="radio" id="textbox2" onclick="check(this.id)"/>
<textarea id="textarea2" disabled="true"></textarea>

Javascript：

function check(id) { 
var thistextbox = id.replace('box', 'area');
var othertextarea = 'textarea1';
if(id.slice(-1) == '1'){
    othertextarea = 'textarea2';
}
var othertextbox = othertextarea.replace('area', 'box');
document.getElementById(id).checked = true;
document.getElementById(thistextbox).disabled = false;
document.getElementById(othertextarea).disabled = true;
document.getElementById(othertextbox).checked = false;

}

【讨论】：