Question

我无法创建一个脚本，当选择同一行中的另一个时取消选择一个chebock

action

        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;
        }

This is the final result

同样，很明显，它只适用于第一行。如果我选中了右边的那个，则取消选中左边的一个并启用选择。然后，如果我检查左边的那个，则取消选中右边的一个并禁用选择。

有没有办法能够对其他24行做同样的事情，而不必为每行写2个函数？

Answer 1

试试此代码

＆＃13;

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";
    }
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用单选按钮替换复选框，但需要单独命名每对，例如使用标签中的名称。如果您确定脚本将在客户端上运行，则可以保留现有的复选框方案。

一种方法是动态添加点击侦听器，同时使用 data - 属性为每个复选框添加索引。单击具有偶数索引的复选框时，取消选中下一个奇数。如果单击具有奇数索引的索引，则取消选中前一个索引。

除了您不需要 data - 属性，只要只有匹配到复选框对的选项时，可以使用类似的方案进行选择。我已经缩减了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>

请注意，NodeLists现在是可迭代的，因此您可以在某些主机中代替：

[].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>

注意：您需要更改服务器端的逻辑以使用多个无线电值（使用不同的名称编制索引）。

选中另一个复选框时，取消选中一个复选框

3 个答案: