使用 JQuery 禁用下拉菜单

Question

我有两个下拉选项，然后在选择第二个下拉选项时禁用第一个下拉菜单选项，反之亦然

function coatedpaper() {
    var option = $(this).find('option:selected').val();
    $('#showoption').val(option);
    $('#plastic').prop("disabled", true);
}

function plasticpaper() {
    $('#paper').prop("disabled", true);
}

function chgSelect(which) 
    {
        // alert(which);
    if (which == 'coatedpaper') {
        if (document.getElementById('paper').selectedIndex == 0) //Unlock plastic
            document.getElementById('plastic').disabled = false;
        else // lock plastic
            document.getElementById('plastic').disabled = true;
    } else {
        if (document.getElementById('plastic').selectedIndex == 0) //Unlock paper
            document.getElementById('paper').disabled = false;
        else // lock paper
            document.getElementById('paper').disabled = true;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<legend>
  <h1>Fill Quote Form</h1>
</legend>
<div class="quote-form">
  <div>&nbsp;</div>
  <div class="row">
    <div class="form-group">
      <label class="control-label col-sm-6">Plastic Coated Paper :</label>
      <div class="col-sm-3">
        <select class="form-control" name="plastic_coated_paper" id="plastic_coated_paper" onchange="chgSelect('coatedpaper');">
          <option selected value="0" id="selectpaper">Select Paper</option>
          <option>Black Centered 330</option>
          <option>Black Centered 320</option>
          <option>Black Centered 315</option>
          <option>Black Centered 305</option>
          <option>Black Centered 300</option>
          <option>Black Centered 280</option>
          <option>White Centered 330</option>
          <option>White Centered 320</option>
          <option>White Centered 315</option>
          <option>White Centered 305</option>
          <option>White Centered 300</option>
          <option>White Centered 280</option>
        </select>
      </div>
      <div class="col-sm-3" style="text-align:center;">OR</div>
    </div>
  </div>
  <div>&nbsp;</div>
  <div class="row">
    <div class="form-group">
      <label class="control-label col-sm-6">100% Pure Plastic :</label>
      <div class="col-sm-3">
        <select class="form-control" name="pure_plastic" id="pure_plastic" onchange="chgSelect('plasticpaper');">
          <option selected value="0">Select Plastic</option>
          <option>250 Microns</option>
          <option>260 Microns</option>
          <option>270 Microns</option>
          <option>280 Microns</option>
          <option>290 Microns</option>
          <option>300 Microns</option>
          <option>310 Microns</option>
        </select>
      </div>
      <div class="col-sm-3">(Minimum Quantity 1000 Decks)</div>

我有两个下拉选项。下拉菜单的值和选项都不同。问题是选择第二个下拉选项时禁用第一个下拉菜单选项或选择第一个下拉选项时禁用第二个下拉菜单选项....

塑料涂层有 12 个选项，100% 纯塑料有 7 个选项，如果在 12 个选项中我选择一个选项，那么 100% 纯塑料的所有选项都应该被禁用，或者如果我选择 100% 纯塑料选项中的一个选项，那么应该禁用所有 12 个塑料涂层纸选项

塑料涂层纸和 100% 纯塑料是这里的两个下拉选项

Answer 1

试试这个例子

HTML

<select class="ddl">
<option value="0"> Select </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> Three </option>
<option value="4"> Four </option>
<option value="5"> Five </option>
<option value="6"> Six </option>
</select>  
<select class="ddl">
<option value="0"> Select </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> Three </option>
<option value="4"> Four </option>
<option value="5"> Five </option>
<option value="6"> Six </option>
</select>  

脚本

    $('.ddl').change(function(){
       if($(this).val()!="0") {   
           $('select[class="ddl"]').not($(this)).find('option').attr('disabled','disabled');
       }
    })

Working fiddle

Answer 2

您可以在 jquery 中使用 prop 禁用选择。

$('#selectID').prop('disabled', 'disabled');

希望您对此有所了解。

Answer 3

我希望这能满足您的要求....请找到这个解决方案：- https://jsfiddle.net/f80zdjnf/11/

<select class="ddl1">
<option value="0"> Select </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> Three </option>
<option value="4"> Four </option>
<option value="5"> Five </option>
<option value="6"> Six </option>
</select>  
<select class="ddl2">
<option value="0"> Select </option>
<option value="1"> One </option>
<option value="2"> Two </option>
<option value="3"> Three </option>
<option value="4"> Four </option>
<option value="5"> Five </option>
<option value="6"> Six </option>
</select>  

js部分如下

$('.ddl1').change(function(){
   if($(this).val()!="0") {   $('select[class="ddl2"]').find('option').attr('disabled','disabled');
}
else
{
$('select[class="ddl2"]').find('option').removeAttr("disabled");
}
});
$('.ddl2').change(function(){
   if($(this).val()!="0") {   $('select[class="ddl1"]').find('option').attr('disabled','disabled');
}
else
{
$('select[class="ddl1"]').find('option').removeAttr("disabled");
}
});

Answer 4

您可以禁用其他选择框uisng jQuery。在您的页面中包含Jquery js文件并将以下脚本添加到页面中。

<script>
            $(document).on("change", "#plastic_coated_paper",
            function(event){
                $("#pure_plastic").prop("disabled",true);
            }
            );
            $(document).on("change", "#pure_plastic",
            function(event){
                $("#plastic_coated_paper").prop("disabled",true);
            }
            );
        </script>