jQuery-禁用/启用选择选项 [英] jQuery - disable/enable select options

问题描述

如果有条件，我需要有关jquery的帮助. 我已经搜索和测试了几个小时，任何帮助都会很棒！ 我得到以下HTML代码:

I need some help with jquery if condition. I've been searching and testing for hours, any help would be great !!! I get this HTML code:

<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函数:

and this jquery function:

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的初学者，我不知道此代码是否正确编写，因为它不起作用.

I'm a beginner in jquery, and I don't know is this code is written correctly because it doesn't work.

问题是:

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

When the input value is less then 3 then select option in select2 is the same as in select1 and the rest of options in select2 are disable. When the input value is greater then 3 then options in select1 and select2 are enable.

最好的问候，谢谢您阅读这篇jquery newbie帖子...

Best Regards, Thank you for reading this jquery newbie post...

推荐答案

尝试一下:

$(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/

这篇关于jQuery-禁用/启用选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！