Disable buttons only when there is min value of Textbox using Jquery

Question

I have 10 Button with different values in html ..

<button class="btn btn-warning" name="table_no" value="2" id="tblidno2">2</button>
<button class="btn btn-warning" name="table_no" value="3" id="tblidno3">3</button>
<button class="btn btn-warning" name="table_no" value="5" id="tblidno5">5</button>
<button class="btn btn-warning" name="table_no" value="8" id="tblidno8">8</button>
<button class="btn btn-warning" name="table_no" value="3" id="tblidno3">3</button>
<button class="btn btn-warning" name="table_no" value="2" id="tblidno2">2</button>
<button class="btn btn-warning" name="table_no" value="7" id="tblidno7">7</button>
<button class="btn btn-warning" name="table_no" value="4" id="tblidno4">4</button>
<button class="btn btn-warning" name="table_no" value="6" id="tblidno6">6</button>
<button class="btn btn-warning" name="table_no" value="4" id="tblidno4">4</button>

and one Input box ,

<input type="text" name="given_tblno" id="given_tblno" value="6" />

Whenever i change ( using OnChange Event) value in input box of given_tblno i want to disable all buttons with a condition given as,

$a=$('#given_tblno').val();
$b=$('#tblidno').val(); // Need to check Each and every Button values using any loop

if($a<$b)
{ 

   //....Here i want Disable buttons when condition is true.... 

}

So here in my example when this condition true buttons will be disabled where the values are occurred in buttons 2,3,5,3,2,4,4 .. Only 8,7,6 values has buttons it should be enabled for click actions.

Using Jquery i wanted to do .

can you explain it in more detail of what you want to do?

Chanckjh
– Chanckjh

2014-11-01 06:28:46 +00:00
Commented Nov 1, 2014 at 6:28 — Chanckjh
– Chanckjh, Commented Nov 1, 2014 at 6:28

score 1 · Accepted Answer · 2014-11-01 08:26:53Z

$(function() {
  var btns = $('button[name=table_no]');
  $('#given_tblno').on('input', function() {
    var cur = parseInt($(this).val()) || 0;
    btns.prop('disabled', function() {
      return parseInt(this.value) < cur;
    });
  }).trigger('input');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-warning" name="table_no" value="2" id="tblidno2">2</button>
<button class="btn btn-warning" name="table_no" value="3" id="tblidno3">3</button>
<button class="btn btn-warning" name="table_no" value="5" id="tblidno5">5</button>
<button class="btn btn-warning" name="table_no" value="8" id="tblidno8">8</button>
<button class="btn btn-warning" name="table_no" value="3" id="tblidno3">3</button>
<button class="btn btn-warning" name="table_no" value="2" id="tblidno2">2</button>
<button class="btn btn-warning" name="table_no" value="7" id="tblidno7">7</button>
<button class="btn btn-warning" name="table_no" value="4" id="tblidno4">4</button>
<button class="btn btn-warning" name="table_no" value="6" id="tblidno6">6</button>
<button class="btn btn-warning" name="table_no" value="4" id="tblidno4">4</button>
<input type="text" name="given_tblno" id="given_tblno" value="6" />

Piyush Kumar Baliyan · Accepted Answer · 2014-11-01 07:11:06Z

1

You can take advantageof jQuery html() method and JS parseInt method. Just check if button $(this).html() is less than the $('#given_tblno').val() and if yes, then change $(this).attr('disabled','disabled').

Here is your code:

<script>
$("#max_tblno,#given_tblno").change( function() {
    a = parseInt($('#max_tblno').val());
    b = parseInt($('#given_tblno').val());
    if(a<b){
        $(this).siblings().removeAttr('disabled');
            $('button').each(
            function(){
                if(parseInt($(this).html())<b){
                    $(this).attr('disabled','disabled');
                }
            });
        }
    });
</script>

Here is the Fiddle: http://jsfiddle.net/piyushkmr/xyL0p6ay/1/

edited Nov 1, 2014 at 7:11

answered Nov 1, 2014 at 7:05

Piyush Kumar Baliyan

4041 gold badge6 silver badges21 bronze badges

1 Comment

Arockiaraj Over a year ago

I have edited my question.. There will not be max_tblno to compare given_tbleno.. When load and change given_tblno should compare with all button values and it should be disable in condition.

Rasel · Accepted Answer · 2014-11-01 06:55:54Z

try this out

html

<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script></head>

<button class="btn btn-warning" name="table_no" value="2" id="tblidno2">2</button>
<button class="btn btn-warning" name="table_no" value="3" id="tblidno3">3</button>
<button class="btn btn-warning" name="table_no" value="5" id="tblidno5">5</button>
<button class="btn btn-warning" name="table_no" value="8" id="tblidno8">8</button>
<button class="btn btn-warning" name="table_no" value="3" id="tblidno3">3</button>
<button class="btn btn-warning" name="table_no" value="2" id="tblidno2">2</button>
<button class="btn btn-warning" name="table_no" value="7" id="tblidno7">7</button>
<button class="btn btn-warning" name="table_no" value="4" id="tblidno4">4</button>
<button class="btn btn-warning" name="table_no" value="6" id="tblidno6">6</button>
<button class="btn btn-warning" name="table_no" value="4" id="tblidno4">4</button>
<input type="text" name="given_tblno" id="max_tblno" value="3" />
<input type="text" name="given_tblno" id="given_tblno" value="6" />

jquery

$(function(){
            $('#given_tblno').on('keyup', function() {
                $a=parseInt( $('#max_tblno').val() );
             $b=parseInt( $('#given_tblno').val() );
             if($a<$b)
             {      
                $("button[id^='tblidno']").prop("disabled",true);               
             }
             else
                $("button[id^='tblidno']").prop("disabled",false);
            });
        });

fiddle link

Did you see the fiddle? i changed your hidden field to text because it you cant change it if it remain hidden.

Milind Anantwar · Accepted Answer · 2014-11-01 07:09:18Z

0

Use

var vals = ['2','3','4','5'];
$("#given_tblno").on('change keyup',function() {
 $a = parseInt($('#max_tblno').val());
 $b = parseInt($('#given_tblno').val());
  if($a<$b){
    $("[value='" + vals.join("'],[value='") + "']").attr('disabled','disabled');
  }else{
     $('button[name="table_no"]').removeAttr('disabled');
    }
});

Working Demo

edited Nov 1, 2014 at 7:09

answered Nov 1, 2014 at 6:36

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

1 Comment

Arockiaraj Over a year ago

max_tblno will be constant and can't be change you can see that i given as hidden field .So only given_tblno can be change. Kindly update your question

Collectives™ on Stack Overflow

Disable buttons only when there is min value of Textbox using Jquery

4 Answers 4

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related