如果禁用，则删除选定的选项答案

【问题标题】：Remove selected option if disabled如果禁用，则删除选定的选项
【发布时间】：2019-05-25 06:13:04
【问题描述】：

正如标题所示，我希望在禁用时清除所选选项。

例如，如果用户选择“Angelina Jolie”并单击“排除姓名”复选框，则应取消选择并禁用 Angelina Jolie，而选择应显示“选择姓名”。

JSFiddle Demo: https://jsfiddle.net/c26teqjb/

HTML

<div class="">
  <label class="checkbox">
    <input type="checkbox" name="optradio" id="filtri">
    <span class="checkboxtext">Exclude Name</span>
  </label>
</div>
<select id="filtrin">
  <option selected="">Select Name</option>
  <option>Kleenco</option>
  <option>James Franco</option>
  <option>Angelina Jolie</option>
  <option>Jack Black</option>
</select>

JS：

$(document).ready(function () {
  $("#filtri").click(function () {
    $('#filtrin').attr("disabled", $(this).is(":checked"));
  });
});

【问题讨论】：

请使用现场 Stack Snippets（[<>] 工具栏按钮）来获取实时示例，而不是像 jsFiddle 这样的非现场资源； here's how to do one.

标签： javascript jquery

【解决方案1】：

您可以像下面这样重置为第一个索引，

$(document).ready(function () {
  $("#filtri").click(function () {
    $("#filtrin").prop('selectedIndex', 0);
    $('#filtrin').attr("disabled", $(this).is(":checked"));
  });
});

【讨论】：

但是如果你从列表中删除它，它会自动回到“选择名称”

【解决方案2】：

检查一下

$(document).ready(function () {
  $("#filtri").click(function () {
    $('#filtrin').attr("disabled", $(this).is(":checked"));
    var x = $('#filtrin').val();
    $('#filtrin option').each(function(){
    	console.log($(this).text());
      if($(this).text() == x && $(this).text() !="Select Name"){
      	$(this).remove();
      }
    	
    });   
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="">
  <label class="checkbox">
    <input type="checkbox" name="optradio" id="filtri">
    <span class="checkboxtext">Exclude Name</span>
  </label>
</div>
<select id="filtrin">
  <option selected="">Select Name</option>
  <option>Kleenco</option>
  <option>James Franco</option>
  <option>Angelina Jolie</option>
  <option>Jack Black</option>
</select>

【讨论】：