多个选择器，如果另一个选择了选项，则禁用选项

Question

我有多个选择，并且用户可以添加多个选择（进行克隆）。 在每个选择包含选项中，所有选择都相同， 单击添加按钮，使克隆选择div。

<select>
   <option value="en">English</option>
   <option value="ar">Arabic</option>
   <option value="tr">Turkey</option>
</select>

还有更多...

当我从一种语言中选择“英语”时，我要禁用其余的语言。

var stdCountries = $("#countriesContainer").children(".countries").first().clone('.add');

        $(document).on('click', '.add',function() {
            append_countries();
        });

        function append_countries() {
            var objHtml = stdCountries.clone('.add');
            $("#countriesContainer").append(objHtml);
            $('.m_selectpicker').selectpicker();
        }
        /////////////////////////////////////////////////////////
        $(".m_selectpicker").selectpicker();
        $(document).on("click", ".remove", function(){
            if($('#countriesContainer .countries').length > 1)
            {
                $(this).closest(".countries").remove();
            }
            else
            {
                generate('info', 'error');
            }
        });
        
            $(document).on("change", ".m_selectpicker", function() {
            $(this).parents('.countries').find('.lang').attr('name', 'name' + '[' + this.value + ']');
            $(this).parents('.countries').find('.lang').attr('value', this.value);

        });

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<form class="m-form m-form--fit m-form--label-align-right" id="m_form_1" method="post">
                <div class="m-portlet__body">
                    <div id="countriesContainer">
                        <div class="form-group m-form__group row countries">
                            <label class="col-form-label col-lg-2">Language</label>
                            <div class="col-2">
                                <select class="form-control m-bootstrap-select m_selectpicker changeLanguage" data-live-search="true" name="language">
                                    <option value="en">Englsih</option>
                                    <option value="ar">Arabic</option>
                                    <option value="tr">Turkey</option>
                        
                                </select>
                            </div>
                            <div class="col-lg-6">
                                <input type='text' class="form-control m-input lang" name="name[]" value=""/>
                            </div>
                            <div class="col-2">
                                <a href="javascript:;" class="btn btn-brand m-btn m-btn--custom add">
                                    add
                                </a>
                                <a href="javascript:;" class="btn btn-danger m-btn m-btn--custom remove">
                                    remove
                                </a>
                            </div>
                        </div>
                    </div>
                   
                </div>
               
            </form>

如果您有任何想法请帮助我， 谢谢 问候。

Answer 1

<select id="selectOne" class="form-control m-bootstrap-select m_selectpicker changeLanguage" data-live-search="true" name="language">
      <option value="en">Englsih</option>
      <option value="ar">Arabic</option>
      <option value="tr">Turkey</option>                   
</select>

Js

$(document).on("change", "#selectOne", function(){
  if($('#selectOne').val() == 'en'){
    $('select:not("#selectOne")').attr('disabled', true);​​​
  }else{
    $('select:not("#selectOne")').attr('disabled', false);​​​
  }
});