需要在单击复选框时启用/禁用按钮

时间:2011-03-09 09:27:12

标签: javascript jquery

我正在尝试在页面加载时禁用订单按钮,并在检查条款和条件复选框时启用它。我在页面加载时禁用订单按钮的地方工作,但是在单击复选框时按钮不会启用。这是我的代码。任何人都可以帮我识别问题

   <input type="checkbox" id="checkbox1" name="checkbox1" class="required" />Please read the <a href="#">Terms and Conditions</a>

Jquery代码

 var j$ = jQuery.noConflict();
 j$(document).ready(function(){
 alert("Hi");
if(j$('input[name="checkbox1"]').not(":checked"))
{
  j$('input[name="Order"]').attr('disabled', 'disabled');
}
else
{
  j$('input[name="Order"]').removeAttr('disabled');
}
j$('#checkbox1').change(function(){
  if(j$('input[name="checkbox1"]').is(":checked")
     {
     j$('input[name="Order"]').attr('disabled', 'disabled');
     }
  else
     {
     j$('input[name="Order"]').removeAttr('disabled');
     }
  }
 });

由于

Prady

4 个答案:

答案 0 :(得分:2)

您错过了一个右括号

if(j$('input[name="checkbox1"]').is(":checked")

应该是

if(j$('input[name="checkbox1"]').is(":checked"))

您也可以使用id选择器代替此attribue选择器。

如果要在选中复选框时启用该按钮,则必须

if(!j$('input[name="checkbox1"]').is(":checked"))

答案 1 :(得分:2)

您提供的代码遗漏了({,这是一个更新版本,其中包含一些更改以正确处理复选框状态:

var j$ = jQuery.noConflict();
j$(document).ready(function() {   
    var checkbox1 = j$('#checkbox1');
    var order = j$('input[name="Order"]');

    var verifyChecked = function() {
        if (checkbox1.is(":checked") === false) {
            order.attr('disabled', 'disabled');
        } else {
            order.removeAttr('disabled');
        }
    };

    verifyChecked();

    checkbox1.change(verifyChecked);
});

这是一个有效的jsfiddle:

http://jsfiddle.net/7uRf6/4/

答案 2 :(得分:1)

在您的change活动中

if(j$('input[name="checkbox1"]').is(":checked")

应该是

if(j$('input[name="checkbox1"]').not(":checked")

我建议你创建一个检查它的函数。

var j$ = jQuery.noConflict();

j$(document).ready(function(){
   ToggleButton();
   j$('#checkbox1').change(ToggleButton);
});

function ToggleButton()
{
  if(j$('input[name="checkbox1"]').not(":checked"))
  {
    j$('input[name="Order"]').attr('disabled', 'disabled');
  }
  else
  {
    j$('input[name="Order"]').removeAttr('disabled');
  }
}

答案 3 :(得分:1)

<script src="jquery.js"></script>
<script>

$(document).ready(function (){

    $('#ch').click(

        function (){
            if($(this).is(':checked')){
                $('#bt').attr('disabled','disabled');
            }
            else {
                // remove
                $('#bt').removeAttr('disabled');                
            }
        }
    )

})
</script>
<input type="button" value="button" id="bt"/>
<input type="checkbox" id="ch"/>