单选按钮和输入字段答案

【问题标题】：Radio Button and an Input field单选按钮和输入字段
【发布时间】：2011-05-18 09:21:14
【问题描述】：

我想设置一个表单，用户可以在其中从一组单选按钮中进行选择，如果他们不喜欢任何选择，他们可以使用最后一个单选按钮，该按钮将有一个文本字段，他们可以在其中输入自定义文本。

我在一些网站上看到过这个。只是想知道它是在哪里以及如何实现的

【问题讨论】：

【解决方案1】：

我给你做了个例子，这是你想要的吗？ http://www.jsfiddle.net/T7gE7/

var temp = '';
function disableTxt() {
    var field = document.getElementById("other");
    if(field.value != '') {
        temp = field.value;
    }
    field.style.display = "none";
    field.value = '';
}
function enableTxt() {
    document.getElementById("other").style.display = "inline";
    document.getElementById("other").value = temp;
}

【讨论】：

我又摆弄了一些，我觉得这样更整洁jsfiddle.net/T7gE7/4

【解决方案2】：

hmmm @Dai 比我快 :P... 但无论如何，这是一种使用 Mootools 做同样事情的非侵入性方式（如果你不想混合 js 和 html 代码）

http://jsfiddle.net/raKbZ/1/

$('radio4').addEvent('change',function(E){
    if(E.target.checked){
        enableInput();
    }
});

$$('.normal').each(function(radio){
    radio.addEvent('change',function(E){
         if(E.target.checked){
             disableInput();
         }
    });
});


function enableInput(){
    $('other').set('disabled','');
    $('other').setStyle('background-color','#fff');
}

function disableInput(){
    $('other').set('disabled','disabled');
    $('other').setStyle('background-color','#d4d4d4');
}

【讨论】：

【解决方案3】：

创建三个单选按钮和您的输入字段，然后将输入字段设置为禁用。将 javascript 事件附加到调用 javascript 函数的第三个单选按钮。然后，此功能将启用输入字段，允许用户输入自己的选项。您还应该将 javascript 事件添加到其他两个单选按钮，以在重新选择时禁用输入字段。

【讨论】：