Если флажок уже установлен при загрузке

Question

Используя этот jquery, я зацикливаюсь на элементах и ​​проверяю, установлен ли соответствующий флажок.

Когда страница загружается, флажки проверяются, но консоль показывает console.log( id + ' not checked' );

Я что-то пропустил, потому что, насколько я вижу, в консоли должно отображаться console.log( id + ' checked' );

Код и HTML:

$(document).ready(function(e) {
  $('.row').each(function(index, element) {
    console.log($(element).attr("id"));
    default_status($(element).attr("id"));
  });
});

function default_status(id) {
  if ($('#dr_default_' + id).is(':checked')) {
    console.log(id + ' checked');
    for (i = 1; i < 4; i++) {
      $('#dr_number' + i + '_' + id).val('');
      $('#dr_number' + i + '_' + id).attr('placeholder', 'default');
      $('#dr_number' + i + '_' + id).attr('disabled', true);
      $('#dr_number' + i + '_' + id).removeClass('required');
    }
  } else {
    console.log(id + ' not checked');
    for (i = 1; i < 4; i++) {
      $('#dr_number' + i + '_' + id).val('');
      $('#dr_number' + i + '_' + id).attr('placeholder', '');
      $('#dr_number' + i + '_' + id).attr('disabled', false);
      $('#dr_number' + i + '_' + id).addClass('required');
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="checkbox"></td>
    <td><input type="checkbox" id="dr_default_1" class="row" onclick="default_status('1');" checked="checked"></td>
    <td>1</td>
    <td></td>
    <td><input type="text" name="" id="dr_number1_1" class="form-control" /></td>
    <td><input type="text" name="" id="dr_number2_1" class="form-control" /></td>
    <td><input type="text" name="" id="dr_number3_1" class="form-control" /></td>
    <td>
      <select name="" id="dr_dialing_1" class="form-control">

      </select>
    </td>
  </tr>

  <tr>
    <td><input type="checkbox"></td>
    <td><input type="checkbox" id="dr_default_2" class="row" onclick="default_status('2');" checked="checked"></td>
    <td>2</td>
    <td></td>
    <td><input type="text" name="" id="dr_number1_2" class="form-control" /></td>
    <td><input type="text" name="" id="dr_number2_2" class="form-control" /></td>
    <td><input type="text" name="" id="dr_number3_2" class="form-control" /></td>
    <td>
      <select name="" id="dr_dialing_2" class="form-control">

      </select>
    </td>
  </tr>
</table>

Answer 1

Проблема в том, что идентификатор, который вы передаете в функцию "default_status ()", уже завершен, кроме #, чтобы сделать его действительным селектором CSS / jQuery.

Это означает, что когда вызапустите $('#dr_default_' + id), на самом деле он делает окончательный селектор $('#dr_default_dr_default_1') (например), и, конечно, jQuery не может его найти, поэтому он сообщает об этом как о не проверенном.

Просто удалите жестко запрограммированную часть идентификатора из вашеготест, и он будет работать:

$(document).ready(function(e) {
  $('.row').each(function(index, element) {
    console.log($(element).attr("id"));
    default_status($(element).attr("id"));
  });
});

function default_status(id) {
  if ($('#' + id).is(':checked')) {
    console.log(id + ' checked');
    for (i = 1; i < 4; i++) {
      $('#dr_number' + i + '_' + id).val('');
      $('#dr_number' + i + '_' + id).attr('placeholder', 'default');
      $('#dr_number' + i + '_' + id).prop('disabled', true);
      $('#dr_number' + i + '_' + id).removeClass('required');
    }
  } else {
    console.log(id + ' not checked');
    for (i = 1; i < 4; i++) {
      $('#dr_number' + i + '_' + id).val('');
      $('#dr_number' + i + '_' + id).attr('placeholder', '');
      $('#dr_number' + i + '_' + id).prop('disabled', false);
      $('#dr_number' + i + '_' + id).addClass('required');
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="checkbox"></td>
    <td><input type="checkbox" id="dr_default_1" class="row" onclick="default_status('1');" checked="checked"></td>
    <td>1</td>
    <td></td>
    <td><input type="text" name="" id="dr_number1_1" class="form-control" /></td>
    <td><input type="text" name="" id="dr_number2_1" class="form-control" /></td>
    <td><input type="text" name="" id="dr_number3_1" class="form-control" /></td>
    <td>
      <select name="" id="dr_dialing_1" class="form-control">

      </select>
    </td>
  </tr>

  <tr>
    <td><input type="checkbox"></td>
    <td><input type="checkbox" id="dr_default_2" class="row" onclick="default_status('2');" checked="checked"></td>
    <td>2</td>
    <td></td>
    <td><input type="text" name="" id="dr_number1_2" class="form-control" /></td>
    <td><input type="text" name="" id="dr_number2_2" class="form-control" /></td>
    <td><input type="text" name="" id="dr_number3_2" class="form-control" /></td>
    <td>
      <select name="" id="dr_dialing_2" class="form-control">

      </select>
    </td>
  </tr>
</table>