Question

以下是我的表单

中的两个代码段

//复选框

<input type="checkbox" style="margin-right:3px">I confirm that the details on this form are correct.

//提交按钮

<input type="image" src="images/submit-btn.png" border="0" >

现在我的问题是，如何启用禁用提交按钮，使用复选框，通过jquery？

Answer 1

试试这个

$(':checkbox').change(function(){
    $('input[type="image"]').attr("disabled", !$(this).attr('checked'));
});

$('input[type="image"]').click(function(){
alert("123");
});

修改

<input type="image" src="images/submit-btn.png" border="0" disabled="disabled"/>

小提琴示例：http://jsfiddle.net/hKAE5/

Answer 2

你可能提出了错误的问题。上面的提交按钮实际上不是图像提交按钮。

图片提交按钮

<INPUT TYPE="image" SRC="images/submit-btn.png" id="submit_id" />

如果要在选中复选框（ID为checkbox_id）时运行代码，请使用以下代码段：

$('#checkbox_id').change(function() { 
if ($(this).is(':checked'))
    $("#submit_id").attr("disabled", "disabled");
});

修改如果您希望默认情况下禁用提交按钮，则需要：

<INPUT TYPE="image" SRC="images/submit-btn.png" id="submit_id" disabled="disabled" />

然后您只需更改上面的代码段，因此当用户点击复选框时，将启用按钮：

$('#checkbox_id').change(function() { if ($(this).is(':checked')) { // DISABLE $("#submit_id").attr("disabled", "disabled"); } else { // ENABLE $("#submit_id").removeAttr("disabled"); } });

Answer 3

以下示例适用于您现有的标记。你可以在这里测试：http://jsfiddle.net/brentmn/yPmSV/

HTML：

<input type="checkbox" style="margin-right:3px">I confirm that the details on this form are correct.

<a class="submit disabled" href="#"><img src="images/submit-btn.png" border="0" ></a>

JS：

$(function() {
    var $check = $(':checkbox');
    var $submit = $('.submit');

    $submit.on('.click', function() {
        return $check.is(':checked');
    });

    $check.on('click', configureSubmit);

    function configureSubmit() {
        if ($check.is(':checked')) {
            $submit.removeClass('disabled');
        } else {
            $submit.addClass('disabled');
        }
    }

    configureSubmit();
});

Answer 4

由于您的提交按钮是一个链接（不是真正的提交按钮），我假设您正在使用javascript来处理链接上的点击事件。如果要禁用提交，则应提供处理此链接上的单击的方式，或者应使用提交按钮。使用提交按钮时，您可以设置disabled属性以禁用它。

如何使用复选框启用禁用图像提交按钮？

4 个答案: