CODEWITHSUNDEEP
jqueryhtml
sasori
sasori

Reputation: 5463

how to enable a disabled image submit button using checkbox?

Here are the two code snippets that are part of my form

//checkbox

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

//submit button

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

now my question is, how to enable disable the submit button using the checkbox , via jquery ?

Upvotes: 0

Views: 8477

Answers (4)

Brent Anderson
Brent Anderson

Reputation: 966

Here is an example that works with your existing markup. You can test here: 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();
});

Upvotes: 1

dku.rajkumar
dku.rajkumar

Reputation: 18588

try this

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

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

EDIT:

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

fiddle example: http://jsfiddle.net/hKAE5/

Upvotes: 2

Michal Drozd
Michal Drozd

Reputation: 1351

You have probably put wrong question. Above submit button actually is not image submit button.

Image submit button is

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

If you want run code when checkbox (with ID checkbox_id) is checked use following snippet:

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

EDIT: If you want submit button disabled by default you need:

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

And then you just change above snippet, so when user click on checkbox, button will be enabled:

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

Upvotes: 1

Roel
Roel

Reputation: 326

Since your submit button is a link (not a real submit button) I assume you're using javascript to handle a click event on the link. If you want to disable the submit you should either provide the way you handle a click on this link, or you should use a submit button instead. When using a submit button you can set the disabled attribute to disable it.

Upvotes: 0

Related Questions