【问题标题】:jQuery - disable/enable select optionsjQuery - 禁用/启用选择选项
【发布时间】:2012-07-22 16:48:40
【问题描述】:

我需要一些关于 jquery if 条件的帮助。 我已经搜索和测试了几个小时,任何帮助都会很棒! 我得到这个 HTML 代码:

<label id="label1" for="date_from">Value:</label>
<input value="" />

<select id="select1" name="select1">
<option>No Match</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>

<select id="select2" name="select2">
<option>No Match</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>

还有这个 jquery 函数:

if ( $('#label1').val() < 3 ) {
           $('select').change(function() {

            $('#select1, #select2').not(this)
                .children('option[value=' + this.value + ']')
                attr('disabled', true)
                .siblings().removeAttr('disabled');

        });
}
else {
    $('select').change(function() {

        $('#select1, #select2').not(this)
            .children('option[value=' + this.value + ']')
            .attr('disabled', false)
            .siblings().removeAttr('disabled');

    });
}

我是 jquery 的初学者,我不知道这段代码是否正确编写,因为它不起作用。

问题是:

当输入值小于 3 时,select2 中的 select 选项与 select1 中的相同,并且 select2 中的其余选项被禁用。当输入值大于 3 时,select1 和 select2 中的选项被启用。

最好的问候,感谢您阅读这篇 jquery 新手帖子...

【问题讨论】:

    标签: jquery option


    【解决方案1】:

    试试这个:

    $(function(){
        $("input").change(function(){
            if ( $(this).val() < 3 ) {
                $('#select2').prop('disabled', true);
                $('#select1').on("change",function() {
                    $('#select2').val($(this).val());
                });
            }else {
                $("#select1").off();
                $('#select1, #select2').prop('disabled', false);
            }
        });
    });
    

    演示:http://jsfiddle.net/qhPp7/2/

    【讨论】:

    • 不要使用 live 它已被弃用。
    • 感谢您的帮助!这就是我需要的! :)
    猜你喜欢
    • 2019-09-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-06-12
    • 1970-01-01
    • 1970-01-01
    • 2018-02-24
    相关资源
    最近更新 更多