How to Enable or Disable Bootstrap-Select Dropdown with radiobutton using Javascript and jquery

I have two radio buttons and one Bootstrap-select Dropdown.I want to enable/disable dropdown using javascript with the help of two radio buttons.

My Html Code is Given Below:

<div class="container" style="margin-top: 5px;background-color: wheat;">

<div class="card" style="background-color: white;margin: 1em">
    <!--<div class="card-header"></div>-->

    <div class="card-body">


        <div class="row">
            <div class="col-lg-2">
                <label style="margin-top: 1.2em;margin-left: 1em">Type</label>
            </div>
            <div class="row" >
                <div class="col-sm-1">
                    <div class="form-check" style="margin-top: 1.1em;margin-left: 1em">
                        <label class="form-check-label">
                            <input type="radio" class="form-check-input" name="rbType" id="typeNew" value="enable" >New
                        </label>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-check" style="margin-top: 1.1em;margin-left: 1em">
                        <label class="form-check-label">
                            <input type="radio" class="form-check-input" name="rbType" id="typeVisisting" value="disable">Visiting
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" >
            <div class="col-lg-2">
                <label style="margin-top: 1.2em;margin-left: 1em" for="selectCustomer" >Customer Name</label>
            </div>
            <div class="col-lg-10">
                <div class="form-group"  style="margin-top: .5em;margin-right: 1em">
                    <select class=" form-control input-lg" data-live-search="true" title="-- Select a Customer --" name="selectCustomer" id="selectCustomer" >
                        <!--<option value="none">-- Select a Customer --</option>-->

                        @foreach($customers  as $customer)

                        <option value="{{$customer->customer_id}}">{{$customer->customer_id}}  {{$customer->customer_name}}</option>

                        @endforeach       
                    </select>
                </div>



            </div> 
        </div>

    </div>
</div>

Please help me to solve this problem.I am working at this upto three days.

Answer

Add the jquery below

$('input[name="rbType"]').change(function(){
        if(this.value == "enable"){
        $('#selectCustomer').removeAttr('disabled')
      }
      if(this.value == "disable"){
        $('#selectCustomer').attr('disabled','true')
      }
    })

Advertisement

Answer