开发者

disable textfield until select option from select list

I have a list of option inside select list, also I have textfie开发者_StackOverflow社区ld 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?

thanks


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

    });

});


Here is an example using plain 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>

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜