禁用按钮时，有使用jQuery

文本框的最小值我有10个按钮与HTML不同的值..禁用按钮时，有使用jQuery

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

每当我改变（使用OnChange事件）在given_tblno输入框中的值我想要禁用所有按钮，条件如下，

$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这里在我的例子中，当这个条件真正的按钮将被禁用，其中值出现在按钮2,3,5,3,2,4,4 .. 只有8,7,6个值有按钮，它应该启用点击动作。

使用jquery我想做的。

来源

2014-11-01 Arockiaraj

你能在你想要做什么更详细的解释一下吗？ – Chanckjh 2014-11-01 06:28:46

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

来源

2014-11-01 07:07:48 Arvind

使用

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

来源

2014-11-01 06:36:53

max_tblno将保持不变并且不能改变，你可以看到我给出的隐藏字段。所以只有given_tblno可以改变。请更新您的问题 – Arockiaraj 2014-11-01 06:49:40

尝试了这一点

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

来源

2014-11-01 06:55:54 Rasel

这不起作用 – Arockiaraj 2014-11-01 07:44:46

您是否看到小提琴？我把你的隐藏字段改为文字，因为如果它仍然隐藏，你就不能改变它。 – Rasel 2014-11-01 08:35:24

您可以advantageof 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/

来源

2014-11-01 07:05:39

我已编辑我的问题..不会有max_tblno来比较given_tbleno ..当加载和更改given_tblno应该与所有按钮值比较，它应该被禁用的条件。 – Arockiaraj 2014-11-03 05:45:24

禁用按钮时，有使用jQuery

回答

相关问题