如果复选框已在加载时选中答案

【问题标题】：If checkbox is already checked on load如果复选框已在加载时选中
【发布时间】：2019-02-18 21:30:52
【问题描述】：

使用这个 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>

【问题讨论】：

它可能应该，是的。你能展示一个相关HTML的例子吗？向我们展示您的几行。也许还有其他一些细微的错误导致了您的问题。
BTW 作为次要点...根据 jQuery documentation 你应该使用 .prop() 而不是 .attr() 来设置“禁用” - 因为它在技术上是一个属性而不是一个普通的属性。该页面显示 “要检索和更改 DOM 属性，例如表单元素的选中、选择或禁用状态，请使用 .prop() 方法”
@ADyson 查看更新
在你的 default_status 函数中，只引用 id，而不是 '#dr_default_' + id。 ID 应包含 #dr_default_1，例如
旁注； id 是 Element 上的属性，因此 $(element).attr("id") 不必要地调用了两个方法。只需使用element.id。其次，.is(':checked') 使用伪选择器来确定布尔值，但是 .prop('checked') 在已经找到的元素上返回完全相同的东西，直接检索属性，并且不尝试处理伪选择器。赢得胜利。

标签： javascript jquery html checkbox

【解决方案1】：

问题是您传递给“default_status()”函数的 ID 已经完成，除了 # 使其成为有效的 CSS/jQuery 选择器。

这意味着当您运行 $('#dr_default_' + id) 时，它实际上会生成最终选择器 $('#dr_default_dr_default_1')（例如），当然 jQuery 无法找到它，因此它会将其报告为未选中。

只需从测试中删除硬编码的 id 部分，它就会起作用：

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

【讨论】：