Question

我编写了此代码，我想在复选框已选中后禁用输入。没关系，我做到了。另一个功能是关于在复选框必须禁用后单击输入的操作。我的问题是，如果我想单击复选框，然后在此之后启用复选框。这是我的代码；

function clickcity() {
  var checkBox = document.getElementById("city-new-ad");
  var myinput = document.getElementById("select-city-ad");

  if (document.getElementById("city-new-ad").disabled == true) {
    document.getElementById("select-city-ad").disabled == true;
  }
  if (document.getElementById("city-new-ad").disabled == false) {
    if (checkBox.checked == true) {
      document.getElementById("select-city-ad").disabled == true;
    } else {
      document.getElementById("select-city-ad").disabled == false;
    }
  }
}

function clickphone() {
  var checkBox = document.getElementById("phone-ad");

  if (checkBox.checked == true) {
    document.getElementById("another-phone").disabled = true;
  } else {
    document.getElementById("another-phone").disabled = false;
  }
}

function clickcity_option() {
  document.getElementById("city-new-ad").disabled = true;
}

function clickphone_option() {
  document.getElementById("phone-ad").disabled = true;
}

<div class="form-group">
  <label for="exampleInputPassword1">phone number:</label>
  <span>my phone number</span>
  <input type="checkbox" id="phone-ad" onclick="clickphone()">
  <br>
  <span class="my-phone-ne">another phone : </span>
  <input type="text" class="form-control input-register"
      onclick="clickphone_option()" id="another-phone"
      style="border: 1px solid #370DFF; display: inline-block; width: 30% !important; margin-right: 5px !important;">
</div>

<div class="form-group">
  <label for="exampleInputPassword1">address: </label>
  <span>my town</span>
  <input type="checkbox" id="city-new-ad" onclick="clickcity()">
  <select class="custom-select select-search select-width"
      onclick="clickcity_option()" id="select-city-ad"
      style=" border: 1px solid #370DFF; width: 20%;">
      <option selected
          style="overflow-wrap: break-word !important; text-align: center !important;">
          choose city</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
  </select>
</div>

Answer 1

在HTML中进行了更改，添加了onkeyup而不是onclick

<input type="text" class="form-control input-register" onkeyup="clickphone_option(this)" id="another-phone" style=" border:1px solid #370DFF; display: inline-block; width: 30% !important ;margin-right: 5px !important;">

在js clickphone_option函数中添加了if条件，该条件检查输入vale是否大于0（如果其大于0则禁用复选框），如果对所有复选框的值退格，则将再次启用复选框。

function clickphone_option(a) {
        if(a.value.lenght>0){
        document.getElementById("phone-ad").disabled = true;
        }else{
        document.getElementById("phone-ad").disabled = false;

        }
    }

禁用后如何启用复选框？

1 个答案: