javascript - 根据另一个选择框的输入禁用一个选择框

Question

当另一个选择框 == 1 时，我想禁用一个选择框，反之亦然。我知道如何使用 ID 来完成此操作，但棘手的地方是我尝试定位的选择框的 ID 和名称是由 php 动态生成的。因此，我需要能够定位选择元素，而不使用其中的唯一数字。在此之前我已经尝试过一些事情，例如“:contains”或“:input”选择器来通过 tr 缩小范围，但无济于事，所以我导致使用通配符，但我仍然无法让它工作。我对 jQuery 相当陌生，所以这可能只是一个简单的语法错误。

var update_tickets = function() {
  if ($("select[id$='Online']").selectedIndex == "1") {
    $("select[id$='On-site']").prop('disabled', true);
  } else if ($("select[id$='On-site']").selectedIndex == "1") {
    $("select[id$='Online']").prop('disabled', true);
  } else {
    $("select[id$='Online']").prop('disabled', false);
    $("select[id$='On-site']").prop('disabled', false);
  }
};

$(update_tickets);
$("select[id$='On-site']").change(update_tickets);
$("select[id$='Online']").change(update_tickets);

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

<table class="em-tickets fusion-table table-1 table" cellspacing="0" cellpadding="0">
  <tr>
    <th class="em-bookings-ticket-table-type">Location</th>
    <th class="em-bookings-ticket-table-price">Price</th>
    <th class="em-bookings-ticket-table-spaces">Spaces</th>
  </tr>
  <tr class="em-ticket" id="em-ticket-14">
    <td class="em-bookings-ticket-table-type">On-site Enrollment</td>
    <td class="em-bookings-ticket-table-price">$50.00</td>
    <td class="em-bookings-ticket-table-spaces boyyyyyyy">
      <select name="em_tickets[14][spaces]" class="em-ticket-selection" id="em-ticket-spaces-14-On-site">
        <option>0</option>
        <option>1</option>
      </select>
    </td>
  </tr>
  <tr class="em-ticket" id="em-ticket-16">
    <td class="em-bookings-ticket-table-type">Online registration</td>
    <td class="em-bookings-ticket-table-price">$50.00</td>
    <td class="em-bookings-ticket-table-spaces boyyyyyyy">
      <select name="em_tickets[16][spaces]" class="em-ticket-selection" id="em-ticket-spaces-16-Online">
        <option>0</option>
        <option>1</option>
      </select>
    </td>
  </tr>
</table>

Answer 1

您试图使用 selectedIndex 来获取 select 元素的值，但这是普通的 JS，它适用于 DOM 节点，而不是 jQuery 选择器，并且不能返回一个字符串(只是索引)。 (正确的访问方式是 $('select')[0].selectedIndex。)

相反，使用 .val() 使用 jQuery 返回输入/选择元素的字符串值。

这是一个固定的演示:

var update_tickets = function() {
  if ($("select[id$='Online']").val() == "1") {
    $("select[id$='On-site']").prop('disabled', true);
  } else if ($("select[id$='On-site']").val() == "1") {
    $("select[id$='Online']").prop('disabled', true);
  } else {
    $("select[id$='Online']").prop('disabled', false);
    $("select[id$='On-site']").prop('disabled', false);
  }
};

$(update_tickets);
$("select[id$='On-site']").change(update_tickets);
$("select[id$='Online']").change(update_tickets);

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

<table class="em-tickets fusion-table table-1 table" cellspacing="0" cellpadding="0">
  <tr>
    <th class="em-bookings-ticket-table-type">Location</th>
    <th class="em-bookings-ticket-table-price">Price</th>
    <th class="em-bookings-ticket-table-spaces">Spaces</th>
  </tr>
  <tr class="em-ticket" id="em-ticket-14">
    <td class="em-bookings-ticket-table-type">On-site Enrollment</td>
    <td class="em-bookings-ticket-table-price">$50.00</td>
    <td class="em-bookings-ticket-table-spaces boyyyyyyy">
      <select name="em_tickets[14][spaces]" class="em-ticket-selection" id="em-ticket-spaces-14-On-site">
        <option>0</option>
        <option>1</option>
      </select>
    </td>
  </tr>
  <tr class="em-ticket" id="em-ticket-16">
    <td class="em-bookings-ticket-table-type">Online registration</td>
    <td class="em-bookings-ticket-table-price">$50.00</td>
    <td class="em-bookings-ticket-table-spaces boyyyyyyy">
      <select name="em_tickets[16][spaces]" class="em-ticket-selection" id="em-ticket-spaces-16-Online">
        <option>0</option>
        <option>1</option>
      </select>
    </td>
  </tr>
</table>