javascript - 使用复选框自动选择输入

input value是checkbox时，如何自动选择unselected？

$("#edit-toggle").prop("checked", true);
$("#edit :input").attr("disabled", true);
function editStatus() {
  $("#edit-toggle").on("change", function() {
    toggleStatus();
  });
}
function toggleStatus() {
  if ($("#edit-toggle").is(":checked")) {
    $("#edit :input").attr("disabled", true);
  } else {
    $("#edit :input").removeAttr("disabled");
  }
}

.edit-icon input[type="checkbox"]:checked ~ .checked {
  display: inline-block;
}

.edit-icon input[type="checkbox"]:checked ~ .unchecked {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit-btn">
  <label class="edit-icon" for=edit-toggle>
  <input id="edit-toggle" type="checkbox" name="toggle" onchange="toggleStatus()"/>
  </label>
</div>
<div id="edit">
  <input type="text" name="name" autocomplete="off" value="Name"/>
</div>

最佳答案

只需调用该字段的.select()方法。

$("#edit-toggle").prop("checked", true);
$("#edit :input").attr("disabled", true);
function editStatus() {
  $("#edit-toggle").on("change", function() {
    toggleStatus();
  });
}
function toggleStatus() {
  if ($("#edit-toggle").is(":checked")) {
    $("#edit :input").attr("disabled", true);
  } else {
    $("#edit :input").removeAttr("disabled");
    $("#edit :input")[0].select();
  }
}

.edit-icon input[type="checkbox"]:checked ~ .checked {
  display: inline-block;
}

.edit-icon input[type="checkbox"]:checked ~ .unchecked {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit-btn">
  <label class="edit-icon" for=edit-toggle>
  <input id="edit-toggle" type="checkbox" name="toggle" onchange="toggleStatus()"/>
  </label>
</div>
<div id="edit">
  <input type="text" name="name" autocomplete="off" value="Name"/>
</div>