Question

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

例如，如果用户选择“ 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"));
  });
});

Answer 1

您可以重置为如下所示的第一个索引

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

Answer 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>

如果禁用则删除选定的选项

2 个答案: