Question

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

感谢

Answer 1

$(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);

    });

});

Answer 2

以下是使用普通JavaScript jsfiddle的示例：

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>

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

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;
    }
}

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

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

2 个答案: