如何使用JavaScript或JQuery在HTML选择中禁用所选项目之后的项目?

时间:2014-03-31 18:01:51

标签: javascript jquery

我有一个选择有5个项目,如果用户将选择第三个q附近的项目已被禁用......

不应选择所选项目下方的项目。

[DEMO] 1

示例:

<select class="form-control" name="itens" id="itens">
    <option value="1">- 1 -</option>
    <option value="2">- 2 -</option>
    <option value="3">- 3 -</option>
    <option value="4">- 4 -</option>
    <option value="5">- 5 -</option>
</select>
<div id="result"></div>

JQuery代码示例:

$('#itens').change(function(){
 $(':selected').each(function(value, i){
    if($('option:selected')){
        var valor = $(this).attr('value');
        $('#result').html(valor);
    }
    //$(this).attr('disabled',true)
 });
});

我对jquery知之甚少。 我需要开发一个页面来发出请求。

... 的 当选择一个项目时,选择它poderar不会选择以下那些,因为将收取费用,并且只能escolhar项目,因为它们是其他费用。 ...

所选项目下方的项目必须已禁用。

1 个答案:

答案 0 :(得分:0)

$(document).on('change', '.form-control', function () {
  $(".form-control option:selected").prop('disabled','disabled')
        .siblings().removeAttr('disabled');   
});

演示:

http://jsfiddle.net/m78mR/1/

更新

$(document).on('change', '.form-control', function () {
          $(".form-control option:selected").next().prop('disabled','disabled');   
});

演示:

http://jsfiddle.net/HXbq6/

相关问题