Как отключить выпадающий

Question

У меня есть 5 раскрывающихся списков, в каждом из которых есть Нет, опция , когда пользователь нажимает на Нет, опция , выбранный раскрывающийся список Нет будет отключен.

$("#general").change(function() {
  if ($("option:selected", this).val() === "null1")
    $(this).attr("disabled", "true");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mt-3 px-3 form-group row">
  <label for="inputGeneral" class="col-sm-3 mt-2 col-form-label">General</label>
  <select id="general" onchange="valChange(value);" class="col-lg-3 mt-2 px-3 selectpicker" name="usageGeneral" multiple data-live-search="true">
    <option value="null1">None</option>
    <option>Network Login</option>
    <option>Email</option>
    <option>Integrated Management System</option>
    <option value="other1">Others</option>
  </select>
  <input type="text" placeholder="Others" style="display: none; padding: 0.5%; height: 0.5%;" id="textbox1">
</div>

Answer 1

Вы используете плагин selectpicker, поэтому вам нужно использовать метод destroy + refresh для установки значения с условной проверкой выбора drop-down.

Примечание: используется data-selection="#hiddeninputid" для большего раскрывающегося списка и написать общий скрипт для всех.

Do c: https://developer.snapappointments.com/bootstrap-select/methods/#selectpickerdestroy

Я надеюсь, что это поможет вам много

var selectedOption = [];
$(document).on('change', '[data-selection]', function(e){ 
  //Get hidden input for others 
  var getHiddenId = $(this).attr('data-selection');
  var currentValues = $(this).val();
  var currentSelection;
  if (selectedOption) {  
    currentSelection = currentValues.filter(function(el) {
      return selectedOption.indexOf(el) < 0;
    });
  }
  selectedOption = $(this).val();
  // If user select None
  if (currentSelection=='null1') {
    $(this).val('null1');
    $(this).selectpicker('destroy').selectpicker('refresh');
    $(getHiddenId).hide();
  }
  // If not selected None
  if (currentSelection!='null1') {
    $(getHiddenId).hide();
    const index = selectedOption.indexOf('null1');
    if (index > -1) {
     //Remove null1 from array
     selectedOption.splice(index, 1);
    }
    const index2 = selectedOption.indexOf('other1');
    if (index2 > -1) {
      //If other1 is exist in array then appear input field
      $(getHiddenId).fadeIn();
    }
    $(this).val(selectedOption);
    $(this).selectpicker('refresh');
    //If selected Others
    if (currentSelection=='other1') {
      $(this).selectpicker('destroy').selectpicker('refresh');
    }
  }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<!-- Selectpicker Plugins (CSS+JS) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

<div class="container py-3">
	<div class="row">
		<div class="col-sm-12">
			<div class="form-group row">
			  <label for="inputGeneral" class="col-sm-4 col-form-label text-left text-sm-right">General #1:</label>
			  <div class="col-sm-6">
				  <select data-selection="#textbox1" class="form-control selectpicker" name="usageGeneral" multiple data-live-search="true">
				    <option value="null1">None</option>
				    <option>Network Login</option>
				    <option>Email</option>
				    <option>Integrated Management System</option>
				    <option value="other1">Others</option>
				  </select>
				  <input type="text" class="form-control my-2" placeholder="Others" style="display: none" id="textbox1">
				</div>
			</div>
			<div class="form-group row">
			  <label for="inputGeneral" class="col-sm-4 col-form-label text-left text-sm-right">General #2:</label>
			  <div class="col-sm-6">
				  <select data-selection="#textbox2" class="form-control selectpicker" name="usageGeneral" multiple data-live-search="true">
				    <option value="null1">None</option>
				    <option>Network Login</option>
				    <option>Email</option>
				    <option>Integrated Management System</option>
				    <option value="other1">Others</option>
				  </select>
				  <input type="text" class="form-control my-2" placeholder="Others" style="display: none" id="textbox2">
				</div>
			</div>
			<div class="form-group row">
			  <label for="inputGeneral" class="col-sm-4 col-form-label text-left text-sm-right">General #3:</label>
			  <div class="col-sm-6">
				  <select data-selection="#textbox3" class="form-control selectpicker" name="usageGeneral" multiple data-live-search="true">
				    <option value="null1">None</option>
				    <option>Network Login</option>
				    <option>Email</option>
				    <option>Integrated Management System</option>
				    <option value="other1">Others</option>
				  </select>
				  <input type="text" class="form-control my-2" placeholder="Others" style="display: none" id="textbox3">
				</div>
			</div>
			<div class="form-group row">
			  <label for="inputGeneral" class="col-sm-4 col-form-label text-left text-sm-right">General #4:</label>
			  <div class="col-sm-6">
				  <select data-selection="#textbox4" class="form-control selectpicker" name="usageGeneral" multiple data-live-search="true">
				    <option value="null1">None</option>
				    <option>Network Login</option>
				    <option>Email</option>
				    <option>Integrated Management System</option>
				    <option value="other1">Others</option>
				  </select>
				  <input type="text" class="form-control my-2" placeholder="Others" style="display: none" id="textbox4">
				</div>
			</div>
			<div class="form-group row">
			  <label for="inputGeneral" class="col-sm-4 col-form-label text-left text-sm-right">General #5:</label>
			  <div class="col-sm-6">
				  <select data-selection="#textbox5" class="form-control selectpicker" name="usageGeneral" multiple data-live-search="true">
				    <option value="null1">None</option>
				    <option>Network Login</option>
				    <option>Email</option>
				    <option>Integrated Management System</option>
				    <option value="other1">Others</option>
				  </select>
				  <input type="text" class="form-control my-2" placeholder="Others" style="display: none" id="textbox5">
				</div>
			</div>
		</div>
	</div>
</div>

Answer 2

Вам просто нужно удалить атрибут valChange в раскрывающемся списке. У вас уже есть слушатель на вашем jquery скрипте.

$("#general").change(function() {
  if ($("option:selected", this).val() === "null1")
    $(this).attr("disabled", "true");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mt-3 px-3 form-group row">
  <label for="inputGeneral" class="col-sm-3 mt-2 col-form-label">General</label>
  <select id="general" class="col-lg-3 mt-2 px-3 selectpicker" name="usageGeneral" multiple data-live-search="true">
    <option value="null1">None</option>
    <option>Network Login</option>
    <option>Email</option>
    <option>Integrated Management System</option>
    <option value="other1">Others</option>
  </select>
  <input type="text" placeholder="Others" style="display: none; padding: 0.5%; height: 0.5%;" id="textbox1">
</div>