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元素的值，但这是在DOM节点上工作的vanilla JS，而不是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>

Answer 2

试试这个：

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

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

2 个答案: