CODEWITHSUNDEEP
javascriptjqueryhtml
Logan Stanford
Logan Stanford

Reputation: 3

Disable a select box based on the input of another select box

I'm wanting to disable one select box when the other select box == 1 and visa versa. I know how to do this with IDs, but where this gets tricky is that the IDs and names of the select boxes that I'm trying to target are getting dynamically generated by php. So I need to be able to target the select elements without using the unique, numeric number inside of it. I've tried a few things before this such as the ":contains" or ":input" selector to narrow it down by tr but to no avail so I resulted to using wildcards but I'm still not able to get it working. I'm fairly new to jQuery so it's probably just a simple syntax error.

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>

Upvotes: 0

Views: 60

Answers (2)

Jon Uleis
Jon Uleis

Reputation: 18639

You were trying to use selectedIndex to get the value of your select elements, but that's vanilla JS which works on DOM nodes, not jQuery selectors, and doesn't return a string (just the index). (The proper way to access that would be $('select')[0].selectedIndex.)

Instead, use .val() to return the string value of an input/select element using jQuery.

Here's a fixed demo:

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>

Upvotes: 1

Baro
Baro

Reputation: 5520

Try this:

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

Upvotes: 0

Related Questions