Question

我在HTML中有10个具有不同值的按钮..

<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" />

每当我在given_tblno的输入框中更改（使用OnChange事件）值时，我想要禁用具有给定条件的所有按钮，

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

}

所以在我的例子中，这个条件的真实按钮将被禁用，其中值出现在按钮2,3,5,3,2,4,4 .. 只有8,7,6个值具有应该为单击操作启用的按钮。

使用我想做的Jquery。

Answer 1

您可以利用jQuery html（）方法和JS parseInt方法。只需检查按钮$(this).html()是否小于$('#given_tblno').val()，如果是，则更改$(this).attr('disabled','disabled')。

这是你的代码：

<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>

这是小提琴：http://jsfiddle.net/piyushkmr/xyL0p6ay/1/

Answer 2

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

Answer 3

使用

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

Answer 4

试试这个

<强> 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

仅当使用Jquery存在Textbox的最小值时才禁用按钮

4 个答案: