CODEWITHSUNDEEP
jqueryformsselect
JeffVader
JeffVader

Reputation: 702

Jquery - Disable field if criteria is met

I have a form that has 15 rows. Each row has an ID numbered 1 - 15 (row_id) and each row contains a select field and numerous text fields.

What I'm trying to do is if the select option on row_id's 6 or above are set to anything other than 0 then disable row_id 5 and if the select option on row_id's 11 or above are set to anything other than 0 then disable row_id 10.

Eg:

Any select > 0 on rows 6 - 15 will disable row 5
AND 
Any select > 0 on rows 11 -15 will disable row 10

So a select of 2 on row 12 would disable both rows 5 & 10

I've created a fiddle showing the table and how the row_ids are set, but I've now idea how to do this.. http://jsfiddle.net/v0kvwfje/2/

Any suggestions ?

Edit: Code from fiddle:

 $("select").change(function() {
      id = $(this).attr("row_id");
      val = $(this).val();
 });

Upvotes: 0

Views: 106

Answers (4)

Hemant Kabra
Hemant Kabra

Reputation: 884

Replace your existing JavaScript/JQuery code with this:

$("select").change(function() {
    var fifthFlag = 0,
        tenthFlag = 0,
        fifthSelectElement = "select[row_id='5']",
        tenthSelectElement = "select[row_id='10']";

    $("select").each(function(){
        var id = $(this).attr("row_id"),
            val = $(this).val();

        if(val > 0){
            if(id >= 6 && id <= 10){ fifthFlag = 1;} 
            else if(id >= 11){tenthFlag = 1;}
        } 
    });

    if(tenthFlag == 1 && fifthFlag == 1){
        $(fifthSelectElement).attr("disabled","disabled");
        $(tenthSelectElement).attr("disabled","disabled");
    } else if(tenthFlag == 1 && fifthFlag == 0) {
        $(fifthSelectElement).attr("disabled","disabled");
        $(tenthSelectElement).attr("disabled","disabled");
    } else if (tenthFlag == 0 && fifthFlag == 1){
        $(fifthSelectElement).attr("disabled","disabled");
        $(tenthSelectElement).removeAttr("disabled");
    } else {
        $(fifthSelectElement).removeAttr("disabled");
        $(tenthSelectElement).removeAttr("disabled");
    }
});

Upvotes: 0

trincot
trincot

Reputation: 349956

You could do it like this:

 $("select").change(function() {
      var disabled = false;
      var selects = $("select");
      for (var i=selects.length - 1; i >= 4; i--) {
          if (i % 5 == 4) $(selects[i]).prop("disabled", disabled);
          disabled |= selects[i].value;
      }
 });

Fiddle.

This code will iterate through the SELECT elements from bottom to top. Whenever it finds a non-zero entry, it will set the disabled variable to true; it can never get false again during the rest of the loop.

Once the special rows 10 and 5 are encountered (4 and 9 in zero-based numbering), that disabled value is used to set the disabled property of the corresponding element.

If ever you decide to extend the list with 5 more rows, and want the same principle to apply to enable/disable the 15th SELECT element, then the above code will not have to be changed. It will do the job for every fifth SELECT element, no matter how long the list is.

Upvotes: 3

alamnaryab
alamnaryab

Reputation: 1484

try this code

 $("select").change(function() {

  //new code starts here
  var section1 = false;
  var section2 = false;
  var indx = 0;
  $("table tr").each(function(){
         if(indx>=6 && indx<15){
            if($(this).find('select').val()==0){    
        section1=true;
      }
   }
   if(indx>=11 && indx<15){
            if($(this).find('select').val()==0){
        section2=true;
      }
   }

  if(section1==true){
    $("table tr").eq(5).find("select").attr('disabled','disabled');
  }else{
    $("table tr").eq(5).find("select").removeAttr('disabled');
  }
  if(section2==true){
    $("table tr").eq(10).find("select").attr('disabled','disabled');
  }else{
    $("table tr").eq(10).find("select").removeAttr('disabled');
  }
  indx++;
 });
 //new code ends here

  id = $(this).attr("row_id");
  val = $(this).val();
  alert("ID:" + id + " Value:" +val);

 });

fiddle link

Upvotes: 0

fdomn-m
fdomn-m

Reputation: 28611

Any select > 0 on rows 6 - 15 will disable row 5

translate this to code, using the variables you've already set:

  • Any = if
  • Select > 0 = val > 0
  • row 6-15 = id >= 6 (as there are 15 rows, no need to check explicitly)
  • disable row 5 $("[row_id=5]").attr("disabled", true)

ie:

if (val>0 && id>=6) $("[row_id=5]").attr("disabled", true)
if (val>0 && id>=11) $("[row_id=10]").attr("disabled", true)

if you wanted eg 6-10 not 6-end, then add that: (val>0 and id>=6 && id<=10)

or the more generic case of disabling everything before the one selected:

  for(var i=1;i<id;++i)
      $("[row_id='" + i + "']").attr("disabled", true);

Upvotes: 0

Related Questions