根据所选的选项启用/禁用选择框

Question

我正在尝试根据使用jQuery在第三个框（控制器）上进行的选择来启用/禁用2个选择框。 我想要实现的是当用户选择控制器上的前2个选项中的任何一个时，选择框2将启用，当用户选择最后2个选项中的任何一个时，它将禁用选择框2并启用选择框3。如果用户返回他们的选择，则应再次启用选择框2并禁用选择框3，但它不会。

我的代码在第一次迭代时运行完美，但如果用户回来，无论他的选择是什么，两个框都保持禁用状态。

这是片段

$(function() {    //document ready

    $('#mySelect').change(function() {
        if ($('#mySelect :selected').data('type') <= 2 ) {  // if user selects the first 2 items
            if ( $('#mySelect2 :selected').text() == "Disabled") {  //if selection 2 text is Disabled 
                     $('#mySelect2 :selected').text('Select Option');  // replace text with Select Option
                     $('#mySelect2').removeAttr('disabled');  //remove disabled attribute from select box
            };
            $('#mySelect').change(function() {
                if ( $('#mySelect :selected').data('type') > 2) {
                        $('#mySelect2').prop('selectedIndex', 0);
                        $('#mySelect2').attr('disabled', true);
                 };
            });
             //$('#mySelect').change(function() {    // 
             //        $('#mySelect3').prop('selectedIndex', 0);
             //        $('#mySelect3').attr('disabled', 'disabled');
             //     });
            }
        else if ($('#mySelect :selected').data('type') > 2 ) {
            if ( $('#mySelect3 :selected').text() == "Disabled") {  // if text on select 3 is "Disabled"
                $('#mySelect3 :selected').text('Select Option'); // changes value for text on first option of 3rd box
                $('#mySelect3').removeAttr('disabled'); // removes disabled on 3rd checkbox
                  };
                    $('#mySelect').change(function() {
                    if ( $('#mySelect :selected').data('type') <= 2) {
                        $('#mySelect3').prop('selectedIndex', 0);
                        $('#mySelect3').attr('disabled', true);
                    };
                });
                      //    $('#mySelect').change(function() { 
          //  $('#mySelect2').prop('selectedIndex', 0);
        //    $('#myselect3').attr('disabled', 'disabled');
        };
    });
});

body {
  padding: 20px;
  background-color: #efefef;
}

div.container {
  background-color: #fff;
  display:flex;
}

div.result {
  margin-top: 20px;
  background-color: #ddd;
  min-height: 40px;
}

.result > p {
  color: red;
}

select {
  min-width: 100px;
  margin:  20px 10px;
  border: 1px solid #074481
  }
select option {
  line-height: 30px;
  color: blue;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <select name="mySelect" id="mySelect">
    <option value="0" data-type="0" disabled selected>Please Select Option</option>
    <option value="1" data-type="1">option 1</option>
    <option value="2" data-type="2">option 2</option>
    <option value="3" data-type="3">option 3</option>
    <option value="4" data-type="4">option 4</option>
  </select>
  <select name="mySelect2" id="mySelect2" disabled>
    <option value="0" data-type="0" disabled selected>Disabled</option>
    <option value="1" data-type="1">option 1</option>
    <option value="2" data-type="2">option 2</option>
    <option value="3" data-type="3">option 3</option>
    <option value="4" data-type="4">option 4</option>
  </select>
      <select name="mySelect3" id="mySelect3" disabled>
    <option value="0" data-type="0" disabled selected>Disabled</option>
    <option value="1" data-type="1">Yes</option>
    <option value="2" data-type="2">No</option>
  </select>
</div>

这是小提琴：

https://jsfiddle.net/rodcunha/cu07yfzv/12/

提前感谢您的帮助。我敢肯定它可能是非常基本的东西，但我只是开始JS / jQ开发而且不能在我的生活中弄明白。

Answer 1

试试这个：

$(function() {    //document ready

$('#mySelect').change(function() {
    if ($('#mySelect :selected').data('type') <= 2 ) {  // if user selects the first 2 items
        $('#mySelect2').prop('disabled', false);
      $('#mySelect3').prop('disabled', 'disabled');
    }
    else if($('#mySelect :selected').data('type') > 2 ){
        $('#mySelect3').prop('disabled', false);
        $('#mySelect2').prop('disabled', 'disabled');

    }
    else{
        $('#mySelect2').prop('disabled', 'disabled');
        $('#mySelect3').prop('disabled', 'disabled');
    }
  });
});

Answer 2

您的代码中存在一些问题。

第一个是：每次输入相同的函数时都无法附加事件处理程序：

$('#mySelect').change(function() {

第二点是：降低复杂性并使代码更具可读性。避免：

else if ($('#mySelect :selected').data('type') > 2 ) {

另一点是避免重复代码行，如：

$('#mySelect3').prop('selectedIndex', 0);
$('#mySelect3').prop('disabled', true);
$('#mySelect3').text('Disabled');

你可以链接：

$('#mySelect3').prop({selectedIndex: 0,  disabled: true}).find(':selected').text("Disabled");

摘录：

＆＃13;

＆＃13;

$(function() {    //document ready

    $('#mySelect').change(function() {
        if ($('#mySelect :selected').data('type') <= 2 ) {  // if user selects the first 2 items
            if ( $('#mySelect2 :selected').text() == "Disabled") {  //if selection 2 text is Disabled
                $('#mySelect2 :selected').text('Select Option');  // replace text with Select Option
                $('#mySelect2').removeAttr('disabled');  //remove disabled attribute from select box
            };
            $('#mySelect3').prop({selectedIndex: 0,  disabled: true}).find(':selected').text("Disabled");
        } else  {
            if ( $('#mySelect3 :selected').text() == "Disabled") {  // if text on select 3 is "Disabled"
                $('#mySelect3 :selected').text('Select Option'); // changes value for text on first option of 3rd box
                $('#mySelect3').removeAttr('disabled'); // removes disabled on 3rd checkbox
            };
            $('#mySelect2').prop({selectedIndex: 0,  disabled: true}).find(':selected').text("Disabled");
        };
    });
});

＆＃13;

body {
    padding: 20px;
    background-color: #efefef;
}

div.container {
    background-color: #fff;
    display:flex;
}

div.result {
    margin-top: 20px;
    background-color: #ddd;
    min-height: 40px;
}

.result > p {
    color: red;
}

select {
    min-width: 100px;
    margin:  20px 10px;
    border: 1px solid #074481
}
select option {
    line-height: 30px;
    color: blue;
    font-weight: bold;
}

＆＃13;

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


<div class="container">
    <select name="mySelect" id="mySelect">
        <option value="0" data-type="0" disabled selected>Please Select Option</option>
        <option value="1" data-type="1">option 1</option>
        <option value="2" data-type="2">option 2</option>
        <option value="3" data-type="3">option 3</option>
        <option value="4" data-type="4">option 4</option>
    </select>
    <select name="mySelect2" id="mySelect2" disabled>
        <option value="0" data-type="0" disabled selected>Disabled</option>
        <option value="1" data-type="1">option 1</option>
        <option value="2" data-type="2">option 2</option>
        <option value="3" data-type="3">option 3</option>
        <option value="4" data-type="4">option 4</option>
    </select>
    <select name="mySelect3" id="mySelect3" disabled>
        <option value="0" data-type="0" disabled selected>Disabled</option>
        <option value="1" data-type="1">Yes</option>
        <option value="2" data-type="2">No</option>
    </select>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以为选择器添加onChange事件，并将它们绑定到自己的函数，这将使事情变得更容易和更清晰。所以它会是这样的：

<select onchange='myFunction()'>
    <option value="0" data-type="0" disabled selected>Please Select Option</option>
    <option value="1" data-type="1">option 1</option>
    <option value="2" data-type="2">option 2</option>
    <option value="3" data-type="3">option 3</option>
    <option value="4" data-type="4">option 4</option>
  </select>