CODEWITHSUNDEEP
javascriptjqueryhtml
Rango
Rango

Reputation: 313

Disabled all input text field of a class jquery

I am working with gravity form but gravity form is submitting all fields into database, some class have style="display"none" but still data going into db. this is an example of my 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>

I want to disable all input elements which is in all class gf_left_half with display :none like 

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

I am looking for jquery solution.

Updated I am applying like this on my real dom but it is disabling all input of just_test class including which not have 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>

applying like this:

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

Please let me know what I am doing wrong

Upvotes: 2

Views: 798

Answers (2)

Sumesh TG
Sumesh TG

Reputation: 2575

$(document).ready(function(){
  $('.gf_left_half:hidden').each(function(index,elem){
  $(elem).find('input').attr('disabled','disabled');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="gf_left_half" style="display:block">
    <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>

Try this

$(document).ready(function(){
  $('.just_test:hidden').each(function(index,elem){
  $(elem).find('input').attr('disabled','disabled');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<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">
</div>
</li>
<li id="field_8_160" class="gfield gf_left_half just_test field_sublabel_below 
field_description_above gfield_visibility_visible" style="display:none">
<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" >
</div>
</li>

You are disabled all inputs by default that's why which is not working as you expected.

Upvotes: 2

Mohammad
Mohammad

Reputation: 21489

Select .gf_left_half and use :hidden filtering selected class to only hidden element.

$(".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>

Also you can use .filter() to select element has 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>

Upvotes: 3

Related Questions