如果特定选择选项隐藏复选框，否则显示复选框

Question

我正在尝试检测是否选择了下拉表单字段中的特定组，以便我可以禁用复选框，但我无法确定选择整个组的最佳方法，所以如果将来该组扩展它仍将计数组内的所有内容。我已经为组内所有的人添加了租赁的 optgroup

到目前为止，这是JSFIDDLE。 这是我目前拥有的代码：

jQuery:

var thisVar = $('.QuickSearchProperties option:selected').val();

$('.QuickSearchProperties')on('change', function(){
    if(thisVar == 'ALLTEN', 'ALLTENUK', 'ALLTENOVERSEAS'){
       $('.ExcTen').addClass('hide');
    }else{
        $('.ExcTen').addClass('hide');
    }
});

HTML：

<form>
    <select name="QuickSearchProperties" class="QuickSearchProperties">
            <option value="a1" optGroup="Spain">Costa Del Sol</option>
            <option value="a2" optGroup="Spain">Almeria</option>
            <option value="a3" optGroup="Spain">Costa Blanca</option>
            <option value="a4" optGroup="Turkey">Turunc</option>
            <option value="a5" optGroup="Wales">Anglesey</option>
            <option value="a5" optGroup="Wales">Pembrokeshire</option>
            <option value="ALLTEN" optGroup="Tenancy">All Tenancy properties</option>
            <option value="ALLTENUK" optGroup="Tenancy">UK Tenancy properties</option>
            <option value="ALLTENOVERSEAS" optGroup="Tenancy">Overseas Tenancy properties</option>
    </select><br/><br/>

    <span class="ExcTen"><input type="checkbox" name="tenancy" value="1" />Exclude Tenancy </span>
</form>

CSS：

.hide{display:none;}

Answer 1

如果您需要在Tenancy 组的任何选项被选中时隐藏复选框，您必须这样做：

$('.QuickSearchProperties').on('change', function(){
    if($(this).find("option:selected").attr("optGroup") == "Tenancy"){
        $('.ExcTen').addClass('hide');
    } else {
        $('.ExcTen').removeClass('hide');
    }
});

查看Demo Fiddle

Answer 2

$('.QuickSearchProperties').on('change', function(){
    if(['ALLTEN', 'ALLTENUK', 'ALLTENOVERSEAS'].indexOf($(this).val()) > -1){
        $('.ExcTen').addClass('hide');
    }else{
        $('.ExcTen').removeClass('hide');
    }
});