Question

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

＆＃13;

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;
    }
}

＆＃13;

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

＆＃13;

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

塑料涂层有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>

使用JQuery禁用下拉列表

4 个答案: