jquery Select 2-在选择时，从下一个选择元素中删除禁用的属性

bbmckpt7 于 2023-06-22 发布在 jQuery

关注(0)|答案(3)|浏览(137)

我使用Select2来样式化我的选择元素，我想让它除了第一个下拉列表之外的所有下拉列表最初都被禁用，然后当从第一个下拉列表中选择一个选项时，禁用的属性从下一个下拉列表中删除（迫使用户按顺序进行选择）。这是我的资料

$('select').select2();
$('select').prop('disabled', true);
$('select:first-of-type').prop('disabled', false);

$('select').on('select2:select', function(e) {
  $(this).next('select').prop('disabled', false); // remove disabled prop from next select
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select>
  <option>Test 1</option>
  <option>Test 2</option>
  <option>Test 3</option>
  <option>Test 4</option>
</select>

<select>
  <option>Test 1</option>
  <option>Test 2</option>
  <option>Test 3</option>
  <option>Test 4</option>
</select>

<select>
  <option>Test 1</option>
  <option>Test 2</option>
  <option>Test 3</option>
  <option>Test 4</option>
</select>

不幸的是，$(this).next('select')似乎并没有针对下一个元素。

jquery

来源：https://stackoverflow.com/questions/36874722/select2-on-select-remove-disabled-attribute-from-next-select-element

3条答案

按热度按时间

hmtdttj41#

使用.nextAll()和.first()而不是.next()，它只“[获取]匹配元素集中每个元素的紧接的兄弟”，并通过选择器可选地过滤。
.next()不工作的原因是select2在<select>之间注入了一个span。

$('select').select2();
$('select').prop('disabled', true);
$('select:first-of-type').prop('disabled', false);

$('select').on('select2:select', function(e) {
  $(this).nextAll('select').first().prop('disabled', false); // remove disabled prop from next select
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select>
  <option>Test 1</option>
  <option>Test 2</option>
  <option>Test 3</option>
  <option>Test 4</option>
</select>

<select>
  <option>Test 1</option>
  <option>Test 2</option>
  <option>Test 3</option>
  <option>Test 4</option>
</select>

<select>
  <option>Test 1</option>
  <option>Test 2</option>
  <option>Test 3</option>
  <option>Test 4</option>
</select>

赞(0）回复(0）举报 2023-06-22

ljsrvy3e2#

$('select').select2();
$('select').prop("disabled", true);
$('select').eq(0).prop("disabled", false);
$('select').on('select2:select', function(e) {
  var index = $(this).index('select');
  $('select').eq(index + 1).prop("disabled", false); // remove disabled prop from next select
});

赞(0）回复(0）举报 2023-06-22

bsxbgnwa3#

$('select').select2({allowClear: true});
$('select').prop('disabled', true);
$('select:first-of-type').prop('disabled', false);

$('select').on('select2:select', function(e) {
  $(this).nextAll('select').first().prop('disabled', false); // remove disabled prop from next select
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select>
  <option>Test 1</option>
  <option>Test 2</option>
  <option>Test 3</option>
  <option>Test 4</option>
</select>

<select>
  <option>Test 1</option>
  <option>Test 2</option>
  <option>Test 3</option>
  <option>Test 4</option>
</select>

<select>
  <option>Test 1</option>
  <option>Test 2</option>
  <option>Test 3</option>
  <option>Test 4</option>
</select>

赞(0）回复(0）举报 2023-06-22

我来回答

jquery Select 2-在选择时，从下一个选择元素中删除禁用的属性

3条答案

相关问题

热门标签

最新问答