Question

我有两个要求禁用所选索引之前和之前的所有元素。

＆＃13;

$(document).ready(function() {
  $('#test option:not(:selected)').attr('disabled', true);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="tests" id="test">
  <option value="1846">test</option>
  <option value="1962">test2</option>
  <option value="1846">test3</option>
  <option value="1962">test4</option>
  <option value="1846" selected>test5</option>
  <option value="1962">test6</option>
  <option value="1846">test7</option>
  <option value="1962">test8</option>
  <option value="1846">test9</option>
  <option value="1962">test10</option>
  <option value="1846">test11</option>
  <option value="1962">test12</option>
</select>

＆＃13;

我可以禁用所有未选择的元素但不确定如何根据所选索引放置过滤器。

Answer 1

您可以这样做：

$('#test option').each(function(index,value) {
    if(index > 2) {
        $(this).attr('disabled', true);
    }
});

Answer 2

试试这个

$(document).ready(function() {
  $("select").change(function() {
    $('#test option:not(:selected)').attr('disabled', "disabled");
    $('#test option[selected]').attr('disabled', false);
  });

  $("#resetData").click(function() {
    $('#test option[disabled=disabled]').attr('disabled', false);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="tests" id="test">
  <option value="1846">test</option>
  <option value="1962">test2</option>
  <option value="1846">test3</option>
  <option value="1962">test4</option>
  <option value="1846">test5</option>
  <option value="1962">test6</option>
  <option value="1846">test7</option>
  <option value="1962">test8</option>
  <option value="1846">test9</option>
  <option value="1962">test10</option>
  <option value="1846">test11</option>
  <option value="1962">test12</option>
</select>
<button id="resetData">Enable All</button>

Answer 3

尝试使用通用兄弟选择器选择

之后的选项

$('#test option:selected ~ option')

要在所选选项之前选择选项，您可能需要使用类似

的选项

$('#test option:selected').prevAll()

Answer 4

一种方法如下：

$(document).ready(function() {

  // bind the anonymous function of the on() method
  // as the event-handler for the change event:
  $('#test').on('change', function () {

    // retrieving the newly-selected <option> element's
    // selectedIndex property:
    var selectedIndex = this.selectedIndex;

    // converting the HTMLOptionsCollection (the <option>
    // children of the <select> element) into a jQuery
    // collection and using the filter() method:        
    $(this.options).filter(function(i){

      // returning any option whose index is not equal to
      // the selectedIndex:
      return i != selectedIndex;

    // using the prop() method to set the disabled property
    // of the retained elements to true:
    }).prop('disabled', true);
  });
});

请注意，在上面，您可以将特定索引传递给函数，而不是使用this.selectedIndex元素的<select>属性。

＆＃13;

$(document).ready(function() {
  $('#test').on('change', function () {
    var selectedIndex = this.selectedIndex;
    
    $(this.options).filter(function(i){
      return i != selectedIndex;
    }).prop('disabled', true);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="tests" id="test">
  <option value="1846">test</option>
  <option value="1962">test2</option>
  <option value="1846">test3</option>
  <option value="1962">test4</option>
  <option value="1846" selected>test5</option>
  <option value="1962">test6</option>
  <option value="1846">test7</option>
  <option value="1962">test8</option>
  <option value="1846">test9</option>
  <option value="1962">test10</option>
  <option value="1846">test11</option>
  <option value="1962">test12</option>
</select>
<button id="resetData">Reset</button>

＆＃13;

或者：

$(document).ready(function() {
  $('#test').on('change', function() {

    // again: storing the index of the element:
    var selected = this.selectedIndex;

    // using the prop() method's anonymous function,
    // passing in the i argument (the index of the
    // current <option> in the collection:
    $(this.options).prop('disabled', function(i) {

      // if i is equal to the selected index we return
      // false (not-true), otherwise we return true
      // (not-false) to set the disabled property of
      // the current <option>:
      return !( i === selected);
    });
  });
});

＆＃13;

$(document).ready(function() {
  $('#test').on('change', function() {
    
    var selected = this.selectedIndex;
    
    $(this.options).prop('disabled', function(i) {
      return !( i === selected);
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="tests" id="test">
  <option value="1846">test</option>
  <option value="1962">test2</option>
  <option value="1846">test3</option>
  <option value="1962">test4</option>
  <option value="1846" selected>test5</option>
  <option value="1962">test6</option>
  <option value="1846">test7</option>
  <option value="1962">test8</option>
  <option value="1846">test9</option>
  <option value="1962">test10</option>
  <option value="1846">test11</option>
  <option value="1962">test12</option>
</select>
<button id="resetData">Reset</button>

＆＃13;

或者，更简洁一点 - 尽管在此迭代中没有使用index属性：

$(document).ready(function() {
  $('#test').on('change', function () {

    // using only the prop() method and its anonymous function:
    $(this.options).prop('disabled', function(){
      // this sets the disabled property of each element
      // according to the inverse of its selected property,
      // if the element is selected we return false, if
      // it's not selected we return true:
      return !this.selected;
    });
  });
});

＆＃13;

$(document).ready(function() {
  $('#test').on('change', function() {
    $(this.options).prop('disabled', function() {
      return !this.selected;
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="tests" id="test">
  <option value="1846">test</option>
  <option value="1962">test2</option>
  <option value="1846">test3</option>
  <option value="1962">test4</option>
  <option value="1846" selected>test5</option>
  <option value="1962">test6</option>
  <option value="1846">test7</option>
  <option value="1962">test8</option>
  <option value="1846">test9</option>
  <option value="1962">test10</option>
  <option value="1846">test11</option>
  <option value="1962">test12</option>
</select>
<button id="resetData">Reset</button>

＆＃13;

根据您问题的第一行，以上所有方法都会停用所选<option>以外的所有<option>元素;然而，因为这似乎不是你想要的，我会给你最后的选择：

$(document).ready(function() {
  $('#test').on('change', function() {
    // retrieving all the <options>:
    $(this.options)
      // finding the <option> at the same index as the
      // selected index:
      .eq(this.selectedIndex)
      // retrieving all the subsequent sibling elements:
      .nextAll()
      // updating their 'disabled' property to true:
      .prop('disabled', true);
  });
});

＆＃13;

$(document).ready(function() {
  $('#test').on('change', function() {
    $(this.options).eq(this.selectedIndex).nextAll().prop('disabled', true);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="tests" id="test">
  <option value="1846">test</option>
  <option value="1962">test2</option>
  <option value="1846">test3</option>
  <option value="1962">test4</option>
  <option value="1846" selected>test5</option>
  <option value="1962">test6</option>
  <option value="1846">test7</option>
  <option value="1962">test8</option>
  <option value="1846">test9</option>
  <option value="1962">test10</option>
  <option value="1846">test11</option>
  <option value="1962">test12</option>
</select>
<button id="resetData">Reset</button>

＆＃13;

Answer 5

试试这个

$(document).ready(function() {
    $("select").change(function() {
        $('#test option').not(':selected').prop('disabled', true);
    });
});

在索引

5 个答案: