仅将输入字段设置为没有选择标记的空字符串

Question

我有一个容器，其中包含一对输入标签和一个 select 标签。它们都有className，我们就叫它"contact"吧。在 jquery 中，我通过 "contact" 访问所有这些。此外，还有一个复选框，当您选中它时会禁用它，当玩具取消选中它时，它会清空输入字段并删除 disable 。当我取消选中复选框时，我想做的事情是，我想将输入字段设置为空字符串，我这样做了，但我所做的包括 selection 标签，我没有将其设置为空字符串

    $("#showCheckoutHistory").change(function(event){
        if (this.checked){
          $(".contact").attr("disabled","disabled");
        }
        else {
          $(".contact").removeAttr("disabled");
          
          /* here is the problem, how can you empty the value of the                 input ONlY. Without chnaging the className Javascript and                Adding Another name in the HTML
          */
     $(".contact").val("");
        }
    });

<input id="showCheckoutHistory" name="showCheckoutHistory" type="checkbox"/><label for="showCheckoutHistory">check</label>
    
    <div class="container">
    <input type="text" value="oo" class="form-control col-xs-10 contact"><br><br>
    <input type="text" value="xx" class="form-control col-xs-10 contact"><br><br>
      <input type="text" value="yy" class="form-control col-xs-10 contact"><br><br>

    <select class="form-control col-xs-10 contact">
    <option>A</option>
    <option>B</option>
    <option selected>C</option>
    </select>
      
    </div>

有错误，但我不知道是什么

Answer 1

在您的代码中包含 $ 引用。这意味着添加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

在你的 html

$("#showCheckoutHistory").change(function(event){
  if (this.checked){
    $(".contact").attr("disabled","disabled");
  }
  else {
    $(".contact").removeAttr("disabled");

    /* here is the problem, how can you empty the value of the                 input ONlY. Without chnaging the className Javascript and                Adding Another name in the HTML
    */
  $(".contact").each(function(i, el){
      if($(el)[0].nodeName != "SELECT"){
        $(el).val("");
      }
    });

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input id="showCheckoutHistory" name="showCheckoutHistory" type="checkbox"/><label for="showCheckoutHistory">check</label>

  <div class="container">
  <input type="text" value="oo" class="form-control col-xs-10 contact"><br><br>
  <input type="text" value="xx" class="form-control col-xs-10 contact"><br><br>
    <input type="text" value="yy" class="form-control col-xs-10 contact"><br><br>

  <select class="form-control col-xs-10 contact">
    <option>A</option>
    <option>B</option>
    <option selected>C</option>
  </select>

  </div>

</div>

Answer 2

抱歉，我没有足够的声誉来发表评论。我测试了您的代码，并且效果如您所愿。您在 Whosebug 代码片段中错过了 selecting jquery。请检查以下代码。如果在您添加 jquery 脚本后仍然无法正常工作，请告诉我您使用的 jquery 版本。（不要忘记在代码片段编辑器中添加 jquery cdn 或选择 jquery 库）

如果您想保留 select 元素的 select 离子，请删除其中的联系人 class，如下所示。

$("#showCheckoutHistory").change(function(event){
        if (this.checked){
          $(".contact").attr("disabled","disabled");
        }
        else {
          $(".contact").removeAttr("disabled");
          
          /* here is the problem, how can you empty the value of the                 input ONlY. Without chnaging the className Javascript and                Adding Another name in the HTML
          */
     $(".contact").val("");
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="showCheckoutHistory" name="showCheckoutHistory" type="checkbox"/><label for="showCheckoutHistory">check</label>
    
    <div class="container">
    <input type="text" value="oo" class="form-control col-xs-10 contact"><br><br>
    <input type="text" value="xx" class="form-control col-xs-10 contact"><br><br>
      <input type="text" value="yy" class="form-control col-xs-10 contact"><br><br>

    <select class="form-control col-xs-10"> <!-- I removed contact class in here to keep selection -->
    <option>A</option>
    <option>B</option>
    <option selected>C</option>
    </select>
      
    </div>

仅将输入字段设置为没有选择标记的空字符串

setting only the input field as empty string without the selection tag

html

javascript

jquery

jquery-plugins

web