禁用文本字段，直到从选择列表中选择选项

I have a list of option inside select list, also I have textfield that contain the option value when selected. i would like to make the textfield disable as default and when i'm selecting one of the options - the textfield will be enable. Can someone direct me to a simiar example?

我在选择列表中有一个选项列表，我也有选择时包含选项值的文本字段。我想将textfield禁用为默认值，当我选择其中一个选项时 - 将启用文本字段。有人可以指导我一个类似的例子吗？

thanks

谢谢

2 个解决方案

#1

Here is an example using plain JavaScript jsfiddle:

以下是使用纯JavaScript jsfiddle的示例：

HTML:

HTML：

<select id='myselect'>
    <option value='none'>none</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
</select>
<input type='text' value='' name='mytext' id='mytext' disabled />
<button value='add' id='addbtn' name='addbtn'>add</button>

We started by disabled the input textfield.

我们从禁用输入文本字段开始。

var myselect = document.getElementById('myselect');

function createOption() {
    var currentText = document.getElementById('mytext').value;
    var objOption = document.createElement("option");
    objOption.text = currentText;
    objOption.value = currentText;

    //myselect.add(objOption);
    myselect.options.add(objOption);
}

document.getElementById('addbtn').onclick = createOption;

myselect.onchange = function() {
    var mytextfield = document.getElementById('mytext');
    if (myselect.value == 'none'){
        mytextfield.value = '';
        mytextfield.disabled = true;
    }else {
        mytextfield.value = myselect.value;
        mytextfield.disabled = false;
    }
}

Using the example on the previous post we basically add an onchange state to the select tag so when an option is selected we set the textfield's value to what is currently selected, and then basically set the textfield's disable to false. Thus, enable the textfield when an option is selected. Additionally, i added an option called 'none' so when user selects none it'll diable the textfield.

使用上一篇文章中的示例，我们基本上将一个onchange状态添加到select标签，因此当选择一个选项时，我们将textfield的值设置为当前选择的值，然后基本上将textfield的disable设置为false。因此，在选择选项时启用文本字段。另外，我添加了一个名为'none'的选项，因此当用户选择none时，它将对文本字段进行diable。

#2

$(function() {

    var $select = $('#idForSelectBox'),
        $textarea = $('#idForTextarea'),
        status;

    $select.bind('change', function() {

        // If the value of the select box matches "Whatever you want"
        // set status to '', else set status to 'disabled'
        status = ( $(this).val() === 'Whatever you want' ) ? '' : 'disabled';

        $textarea.attr('disabled', status);

    });

});

#1