代码之家 › 专栏 › 技术社区 › Dirk J. Faber

jquery在加载页面时禁用复选框(不仅仅是单击或更改时)

jquery javascript

Dirk J. Faber · 技术社区 · 7 年前

我有两个输入字段(按ID) Location (选择)和 isOnline (复选框)。当复选框 异烟肼 单击后选中,字段 位置 被禁用。我唯一的问题是当复选框 异烟肼 在加载页面时已选中,字段 位置 未禁用,因为JavaScript需要单击。 问题: 如果选中复选框,如何在加载时禁用窗体字段?

HTML

<label>Location </label>
<select id="location">
        <option>1</option>
        <option>2</option>
</select>
<strong>or:</strong>
<input type="checkbox" id="isOnline" checked="checked" />
<label>no location </label>

javascript

jQuery(document).ready(function() {

 $("#isOnline").click(function() {
   if (jQuery(this).prop("checked")) {
     jQuery("#location")
       .prop("disabled", this)
       .attr("placeholder", '')
       .val(null);
   } else {
     jQuery("#location")
       .prop("disabled", false)
       .attr("placeholder", 'the name of the city')
       .val(null);
   }
 });
});

例子以下内容: JSfiddle

2 回复 | 直到 7 年前

First Last 7 年前

我在中添加了一个if语句 jQuery(document).ready() 检查是否 isOnline 已选中并禁用窗体。

jQuery(document).ready(function() {

  $('#isOnline').click(function() {
    if (jQuery(this).prop('checked')) {
      jQuery('#location')
        .prop('disabled', this)
        .attr('placeholder', '')
        .val(null);
    } else {
      jQuery('#location')
        .prop('disabled', false)
        .attr('placeholder', 'Enter the name of the city')
        .val(null);
    }
  });

  if ($('#isOnline').is(':checked')) {
    jQuery('#location')
      .prop('disabled', this)
      .attr('placeholder', '')
      .val(null);

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Location </label>
<select id="location">
  <option>1</option>
  <option>2</option>
</select>

<br>

<strong>or:</strong>
<input type="checkbox" id="isOnline" checked="checked" />
<label>no location </label>

另外,A JSfiddle

kthatoto 7 年前

我认为您应该创建如下的方法。

jQuery(document).ready(function() {
  if ($("#isOnline").prop("checked")) {
    disableLocation();
  }
  $("#isOnline").click(function() {
    if ($(this).prop("checked")) {
      disableLocation();
    } else {
      enableLocation();
    }
  });
});
function disableLocation() {
  $("#location")
    .prop("disabled", true)
    .attr("placeholder", '')
    .val(null);
}
function enableLocation() {
  $("#location")
    .prop("disabled", false)
    .attr("placeholder", 'the name of the city')
    .val(null);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Location </label>
<select id="location">
        <option>1</option>
        <option>2</option>
</select>
<strong>or:</strong>
<input type="checkbox" id="isOnline" checked="checked" />
<label>no location </label>