Отключить поле выбора, основанное на вводе другого поля выбора

Question

Я хочу отключить один флажок для выбора, если в другом поле выбора == 1 и наоборот. Я знаю, как это сделать с идентификаторами, но там, где это сложно, так это то, что идентификаторы и имена полей выбора, которые я пытаюсь настроить, динамически генерируются 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>

Answer 2

Попробуйте это:

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