Получить значение флажка в другом столбце

Question

То, что я хочу сделать из следующего html, это то, что я хотел бы видеть, установлен ли флажок 1 или нет, когда я нажимаю флажок 2.

Если флажок 1 не установлен, я получаю alert сообщение. В противном случае флажок 2 может быть установлен.

$('#table1').on('click',function(){
  //code...
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table1" border="1">
  <tr>
    <td>
      <input type="checkbox" id="1" name="check" value="1"/><label>1</label>
    </td>
    <td>
      <input type="checkbox" id="2" name="check" value="2"/><label>2</label>
    </td>
  </tr>
  <tr>
  <td>
      <input type="checkbox" id="3" name="check" value="1"/><label>3</label>
    </td>
    <td>
      <input type="checkbox" id="4" name="check" value="2"/><label>4</label>
    </td>
  </tr>
</table>

У меня нет идей с jQuery, потому что я новый ученик. Пожалуйста, помогите мне.

Answer 1

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table1" border="1">
    <tr>
        <td>
            <input type="checkbox" id="1" name="check" value="1"/><label>1</label>
        </td>
        <td>
            <input type="checkbox" id="2" name="check" value="2" disabled="disabled"/><label>2</label>
        </td>
    </tr>
</table>

<script>
    $(document).on('click', '#table1 input', function() {
        if ($(this).val() == 1) {
            if ($(this).is(':checked')) {
                alert('checkbox 1 is now checked');
                $('#2').removeAttr('disabled');
            }else {
                alert('checkbox 1 is now not checked');
                $('#2').prop('checked', false);
                $('#2').attr('disabled', 'disabled');
            }
        }else if ($(this).val() == 2) {
            if ($(this).is(':checked')) {
                alert('checkbox 2 is now checked');
            }else {
                alert('checkbox 2 is now not checked');
            }
        }
    });
</script>

Answer 2

Вы можете сделать это так:

$("#2").click(function() {
   if ($("#1").prop("checked") == false ) {
     alert("checkbox 1 is not checked");
     $("#2").prop("checked", false);
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" border="1">
  <tr>
    <td>
      <input type="checkbox" id="1" name="check" value="1" /><label>1</label>
    </td>
    <td>
      <input type="checkbox" id="2" name="check" value="2" /><label>2</label>
    </td>
  </tr>
</table>

Если вы также хотите снять флажок 2, когда флажок 1 снят, вы можете сделать это следующим образом:

$("#2").click(function() {
  if ($("#1").prop("checked") == false ) {
    alert("checkbox 1 is not checked");
    $("#2").prop("checked", false);
  }
});
$("#1").click(function() {
  if ($(this).prop("checked") == false) {
   $("#2").prop("checked", false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <table id="table1" border="1">
      <tr>
        <td>
          <input type="checkbox" id="1" name="check" value="1" /><label>1</label>
        </td>
        <td>
          <input type="checkbox" id="2" name="check" value="2" /><label>2</label>
        </td>
      </tr>
    </table>

Обновление: вопрос был отредактирован и теперь имеет 2 строки с 4 флажками.

$("#2, #4").click(function() {
  if ($(this).parent().prev().find("input").prop("checked") == false) {
    let checkbox = $(this).parent().prev().find("input").attr("id");
    alert("checkbox " + checkbox + " is not checked");
    $(this).prop("checked", false);
  }
});
$("#1, #3").click(function() {
  if ($(this).prop("checked") == false) {
    $(this).parent().next().find("input").prop("checked", false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" border="1">
  <tr>
    <td>
      <input type="checkbox" id="1" name="check" value="1" /><label>1</label>
    </td>
    <td>
      <input type="checkbox" id="2" name="check" value="2" /><label>2</label>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" id="3" name="check" value="1" /><label>1</label>
    </td>
    <td>
      <input type="checkbox" id="4" name="check" value="2" /><label>2</label>
    </td>
  </tr>
</table>

Answer 3

Здесь вы go.

$('#2').change(function() {
  let checked = 0;
  $('#1').each(function() {
    if (this.checked) {
      checked += 1;
    }
  });
  if (checked != 0) {

  } else {
alert("1 is not checked");
document.getElementById("2").checked = false;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" border="1">
  <tr>
    <td>
      <input type="checkbox" id="1" name="check" value="1"/><label>1</label>
    </td>
    <td>
      <input type="checkbox" id="2" name="check" value="2"/><label>2</label>
    </td>
  </tr>
</table>