javascript - 禁用类 jquery 的所有输入文本字段

Question

我正在使用重力形式，但重力形式正在将所有字段提交到数据库中，某些类具有 style="display"none" 但数据仍然进入数据库。 这是我的 html dom 的示例

<div class="gf_left_half" style="display:none">
  <input type="text" value="hh">
</div>
<div class="gf_left_half" style="display:none">
  <input type="text" value="hh">
</div>
<div class="gf_left_half" style="display:none">
  <input type="text" value="hh">
</div>
<div class="gf_left_half" style="display:none">
  <input type="text" value="hh">
</div>

我想使用 display :none 禁用所有类 gf_left_half 中的所有输入元素 就像

<input type="text" disabled="disabled">

我正在寻找 jquery 解决方案。

已更新 我在我的真实 dom 上这样应用，但它禁用了 just_test 类的所有输入，包括没有 style display none

    <li id="field_8_160" class="gfield gf_left_half just_test field_sublabel_below 
field_description_above gfield_visibility_visible">
<label class="gfield_label" for="input_8_160">
Cost per Person
</label>
<div class="ginput_container ginput_container_number">
<input name="input_160" id="input_8_160" type="text" value="2,860" class="small" aria-invalid="false" disabled="disabled">
</div>
</li>

像这样申请:

jQuery('.just_test:hidden').each(function(index,elem){
  jQuery(elem).find('input').attr('disabled','disabled');
  });

请让我知道我做错了什么

Answer 1

选择.gf_left_half并使用:hidden将选定的类过滤为仅隐藏元素。

$(".gf_left_half:hidden input").prop("disabled", true);

$(".gf_left_half:hidden input").prop("disabled", true);
console.log($(".gf_left_half input:disabled").length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gf_left_half" style="display:none">
  <input type="text" value="hh">
</div>
<div class="gf_left_half" style="display:none">
  <input type="text" value="hh">
</div>
<div class="gf_left_half" style="display:none">
  <input type="text" value="hh">
</div>
<div class="gf_left_half" style="display:none">
  <input type="text" value="hh">
</div>
<div class="gf_left_half" style="display:block">
  <input type="text" value="hh">
</div>

您还可以使用.filter()来选择具有display: none的元素

$(".gf_left_half input").prop("disabled", function(){
  return $(this).parent().css("display") == "none";
});

$(".gf_left_half input").prop("disabled", function(){
  return $(this).parent().css("display") == "none";
});
console.log($(".gf_left_half input:disabled").length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gf_left_half" style="display:none">
  <input type="text" value="hh">
</div>
<div class="gf_left_half" style="display:none">
  <input type="text" value="hh">
</div>
<div class="gf_left_half" style="display:none">
  <input type="text" value="hh">
</div>
<div class="gf_left_half" style="display:none">
  <input type="text" value="hh">
</div>
<div class="gf_left_half" style="display:block">
  <input type="text" value="hh">
</div>