javascript - HTML使用javascript清除非活动输入

Question

我有经过验证的问题，这使输入无效。它工作得很好，虽然如果你之前提供了一些价值，现在得出的结论是，这个问题是不必要的，最后使它无效，价值仍然存在。

我不知道如何在禁用时清除此输入。

我的代码如下所示：

$("input[name=more_than_single_block]").on('click', function() {
  var blockNumber = $('#cf_number_of_blocks');
  // if is company
  if ($(this).val() == "Yes") {
    // show panel
    blockNumber.show();

    // remove disabled prop
    blockNumber.find('input,select,radio').prop('disabled', false);
  } else {
    // if is not company, hide the panel and 
    add disabled prop
    //blockNumber.hide();
    blockNumber.value = "";

    blockNumber.find('input,select,radio').prop('disabled', true);

  }
});

我不知道为什么.value=""在这种情况下不起作用。我从其他示例中购买了它：

HTML如何使用javascript清除输入？

https://reactgo.com/clear-input-value-javascript/

使用 javascript 清除输入

blockNumber.val = "";也不起作用

完整代码可在此处获得：

https://jsfiddle.net/9qygs23b/

有没有办法以这种方式清除价值？

标签： javascripthtml

Answer 1

您在 上设置值blockNumber，这是<figure>元素，而不是输入。您可以使用find()和val()功能，以获得所需的结果。

$("input[name=more_than_single_block]").on('click', function() {
  var blockNumber = $('#cf_number_of_blocks');
  // if is company
  if ($(this).val() == "Yes") {
    // show panel
    blockNumber.show();

    // remove disabled prop
    blockNumber.find('input,select,radio').prop('disabled', false);
  } else {
    // if is not company, hide the panel and add disabled prop
    //blockNumber.hide();
    blockNumber.find("input").val("");
    blockNumber.find('input,select,radio').prop('disabled', true);

  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Question 3
<figure class="fig">
  <label>
<div class="order">3</div>
     <p>Is the Property Made Up of More Than a Single Block?<span class="asterisk">&#42;</span></p>
     </label>
  <br>
  <input class="radio-left" name="more_than_single_block" type="radio" value="Yes" required>Yes
  <input class="radio-right" name="more_than_single_block" type="radio" value="No">No
  <br>
</figure>

Question4

<figure class="fig" id="cf_number_of_blocks">
  <label>
       <div class="order">4</div>
       <p>If the Answer to Question 3 is Yes How Many Blocks are Included (A Form Should be Completed for Each Block)<span class="asterisk">&#42;</span>
       </p>
 </label>
  <br>
  <input type="number" min="1" name="number_of_blocks" required>
  <br>
</figure>