Снимите флажок, когда другой флажок

Question

у меня есть проблемы, чтобы создать сценарий, снять выделение с chebock, когда другой на той же линии выбран

 function uncheck1(){ 
 
      document.getElementById("check1").checked = true; 
 
      document.getElementById("check2").checked = false; 
 
      document.getElementById("select").disabled = true; 
 
     } 
 
     function uncheck2(){ 
 
      document.getElementById("check1").checked = false; 
 
      document.getElementById("check2").checked = true; 
 
      document.getElementById("select").disabled = false; 
 
     }

<form name="form" action="action.php" method="post"> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     <input type="hidden" value="Carrizo J." name="player[]" /> 
 
     </td> 
 
     <td> 
 
     <label>Carrizo J.</label> 
 
     </td> 
 
     <td> 
 
     <input id="check1" onclick="uncheck1()" type="checkbox" name="titolare[]" value="0" checked="" /> 
 
     </td> 
 
     <td> 
 
     <input id="check2" onclick="uncheck2()" type="checkbox" name="titolare[]" value="1" /> 
 
     </td> 
 
     <td> 
 
     <select id="select" name="ordine[]" disabled> 
 
      <option>1</option> 
 
      <option>2</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="hidden" value="Handanovic S." name="player[]" /> 
 
     </td> 
 
     <td> 
 
     <label>Handanovic S.</label> 
 
     </td> 
 
     <td> 
 
     <input id="check1" onclick="uncheck1()" type="checkbox" name="titolare[]" value="0" checked="" /> 
 
     </td> 
 
     <td> 
 
     <input id="check2" onclick="uncheck2()" type="checkbox" name="titolare[]" value="1" /> 
 
     </td> 
 
     <td> 
 
     <select id="select" name="ordine[]" disabled> 
 
      <option>1</option> 
 
      <option>2</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>-</td> 
 
     <td>-</td> 
 
     <td>-</td> 
 
    </tr> 
 
    <tr> 
 
     <td>-</td> 
 
     <td>-</td> 
 
     <td>-</td> 
 
    </tr> 
 
    </table> 
 
</form>

Как так же, как, obviusly, он работает только в первой строке. Если я проверил правильную, левая сторона не отмечена, и выбор включен. Затем, если я проверю левый, правый флажок снят и выберите значение отключено.

Есть ли способ сделать то же самое с другими 24 строками, без необходимости писать по 2 функции для каждого?

Answer 1

Попробуйте этот код

window.onload = function() { // when page loaded 
 
    var checks = document.querySelectorAll("input[name='titolare[]']"); 
 
    for (var i = 0; i < checks.length; i++) { // assign to each checkbox 
 
    checks[i].onclick = function() { 
 
     var row = this.parentElement.parentElement, // the TR 
 
     checks = row.querySelectorAll("input[type=checkbox]"), // All checkboxes 
 
     sel = row.querySelector("select"); // the select in the row 
 
     sel.disabled = this.value == "0"; // whatever you clicked 
 
     checks[0].checked = this.value == "0"; 
 
     checks[1].checked = this.value == "1"; 
 
    } 
 
    } 
 
}

<form name="form" action="action.php" method="post"> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     <input type="hidden" value="Carrizo J." name="player[]" /> 
 
     </td> 
 
     <td> 
 
     <label>Carrizo J.</label> 
 
     </td> 
 
     <td> 
 
     <input id="check1" type="checkbox" name="titolare[]" value="0" checked="" /> 
 
     </td> 
 
     <td> 
 
     <input id="check2" type="checkbox" name="titolare[]" value="1" /> 
 
     </td> 
 
     <td> 
 
     <select id="select" name="ordine[]" disabled> 
 
      <option>1</option> 
 
      <option>2</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="hidden" value="Handanovic S." name="player[]" /> 
 
     </td> 
 
     <td> 
 
     <label>Handanovic S.</label> 
 
     </td> 
 
     <td> 
 
     <input id="check1" type="checkbox" name="titolare[]" value="0" checked="" /> 
 
     </td> 
 
     <td> 
 
     <input id="check2" type="checkbox" name="titolare[]" value="1" /> 
 
     </td> 
 
     <td> 
 
     <select id="select" name="ordine[]" disabled> 
 
      <option>1</option> 
 
      <option>2</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>-</td> 
 
     <td>-</td> 
 
     <td>-</td> 
 
    </tr> 
 
    <tr> 
 
     <td>-</td> 
 
     <td>-</td> 
 
     <td>-</td> 
 
    </tr> 
 
    </table> 
 
</form>

Answer 2

Вы можете заменить флажки с кнопками радио, но нужно назвать каждую пару отдельно, например, используя имя в метке. Вы можете сохранить существующую схему флажков, если вы уверены, что скрипт будет запущен на клиенте.

Один из подходов состоит в том, чтобы динамически добавлять слушателей кликов и в то же время добавлять индекс к каждому флажку, используя атрибут -. При щелчке по флажку с четным индексом снимите флажок следующего нечетного. Если щелкнуть один с нечетным индексом, снимите отметку с предыдущей.

Аналогичная схема может быть использована для выбора, за исключением того, что вам не нужен атрибут -, если только есть флажки, соответствующие парам checkbox. Я немного похудел на HTML ...

E.g.

function updateSelect(){ 
 
    var idx = this.dataset.index; 
 

 
    // Uncheck related checkbox. If this one's index 
 
    // is even, uncheck next, otherwise previous 
 
    var checkboxes = document.querySelectorAll('input[type="checkbox"]'); 
 
    checkboxes[idx % 2? idx - 1 : +idx +1 ].checked = false; 
 

 
    // Get the select elements 
 
    var selects = document.querySelectorAll('select'); 
 

 
    // Find related select based on checkbox index 
 
    var selIdx = Math.floor(idx/2); 
 

 
    // Disable based on whether related checkbox index is odd or even 
 
    selects[selIdx].disabled = !(idx%2); 
 
} 
 

 
window.onload = function(){ 
 
    var checkboxes = document.querySelectorAll('input[type="checkbox"]'); 
 

 
    [].forEach.call(checkboxes,function(cb, idx) { 
 
    cb.addEventListener('click', updateSelect, false); 
 

 
    // Add in index to each checkbox so it's easy to find the previous or next 
 
    cb.dataset.index = idx;  
 
    }) 
 
}

<form name="form"> 
 
    <table> 
 
    <tr> 
 
     <td><input type="hidden" value="Carrizo J." name="player[]"> 
 
     <td><label>Carrizo J.</label> 
 
     <td><input type="checkbox" name="titolare[]" value="0" checked> 
 
     <td><input type="checkbox" name="titolare[]" value="1"> 
 
     <td><select name="ordine[]" disabled> 
 
      <option>1</option> 
 
      <option>2</option> 
 
      </select> 
 
    <tr> 
 
     <td><input type="hidden" value="Handanovic S." name="player[]"> 
 
     <td><label>Handanovic S.</label> 
 
     <td><input type="checkbox" name="titolare[]" value="0" checked> 
 
     <td><input type="checkbox" name="titolare[]" value="1"> 
 
     <td><select name="ordine[]" disabled> 
 
      <option>1</option> 
 
      <option>2</option> 
 
      </select> 
 
    </table> 
 
</form>

Обратите внимание, что нодлисты теперь итерация, так что вы в некоторых хостах вместо:

[].forEach.call(checkboxes, function(checkbox, index){...}) 

вы могли бы сделать:

checkboxes.forEach(function(checkbox, index){...}) 

Но поддержка может быть отсутствующий во многих используемых браузерах (пока).

Answer 3

Я считаю, что это довольно много, что вы ищете, и я думаю, что изменения самоочевидны:

function checkChange(elem) { 
 
    var elemRoot = elem.parentNode.parentNode; 
 
    elemRoot.querySelectorAll("select[name='ordine[]']")[0].disabled = !elemRoot.getElementsByClassName('memberRadio2')[0].checked; 
 
}

<form name="form" action="action.php" method="post"> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     <input type="hidden" value="Carrizo J." name="player[]" /> 
 
     </td> 
 
     <td> 
 
     <label for="titolare1">Carrizo J.</label> 
 
     </td> 
 
     <td> 
 
     <input onclick="checkChange(this)" type="radio" name="titolare1" value="0" checked="" /> 
 
     </td> 
 
     <td> 
 
     <input onclick="checkChange(this)" type="radio" name="titolare1" value="1" class="memberRadio2" /> 
 
     </td> 
 
     <td> 
 
     <select name="ordine[]" disabled> 
 
      <option>1</option> 
 
      <option>2</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="hidden" value="Handanovic S." name="player[]" /> 
 
     </td> 
 
     <td> 
 
     <label for="titolare2">Handanovic S.</label> 
 
     </td> 
 
     <td> 
 
     <input onclick="checkChange(this)" type="radio" name="titolare2" value="0" checked="" /> 
 
     </td> 
 
     <td> 
 
     <input onclick="checkChange(this)" type="radio" name="titolare2" value="1" class="memberRadio2" /> 
 
     </td> 
 
     <td> 
 
     <select name="ordine[]" disabled> 
 
      <option>1</option> 
 
      <option>2</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>-</td> 
 
     <td>-</td> 
 
     <td>-</td> 
 
    </tr> 
 
    <tr> 
 
     <td>-</td> 
 
     <td>-</td> 
 
     <td>-</td> 
 
    </tr> 
 
    </table> 
 
</form>

Примечание: Вам нужно будет изменить логику на стороне сервера использовать несколько значений радио (индексируется с использованием отдельных имен).