how to make button disabled using JQuery?

Question

I am developing MVC application. I have check box and submit button.

I want to enable submit button on check box's checked event and on unchecked submit button should disable.

How to do this ?

I have below code....

    @model PaymentAdviceEntity.Account
    @using PaymentAdviceEntity;


    @{
        ViewBag.Title = "Create";
        PaymentAdvice oPA = new PaymentAdvice();
        oPA = (PaymentAdvice)ViewBag.PaymentAdviceObject;

      <div>
             <input type="checkbox" class="optionChk" value="1" /> Paid
        </div>

    <input type="submit" value="Create"  />
    <input type="button"  class="btn-primary" />
    }

    <script type="text/javascript">
$(".optionChk").on("change", function () {
    if ($(this).is(":checked"))
    {
        alert("1");

        $(".SubmitButton").attr("disabled", "disabled"); 
    } else 
    {
        alert("2");

        $(".SubmitButton").attr("enable", "enable"); 
    }    
});
</script>

Possibly duplicate of http://stackoverflow.com/questions/577548/how-can-i-disable-a-button-in-a-jquery-dialog-from-a-function — rhughes, Mar 22 '13 at 13:14

wirey00 · Answer 1 · 2013-03-22T13:57:25.500

2

You should be using prop to set/get the disabled property

$(".optionChk").on("change", function () {
     $("input[type=submit]").prop("disabled",!this.checked);   
});

Also your submit button has no class='Submit' so you need to use the attributes selector.. or give it the class='Submit' and use $('.Submit') in place of $('input[type=submit]')

FIDDLE

edited Mar 22 '13 at 13:57

answered Mar 22 '13 at 13:40

wirey00

33,517
7
54
65

Sergio · Answer 2 · 2013-03-22T13:41:53.743

0

Try this:

$(".optionChk").on("change", function () {
    if ($(this).is(":checked")) {
        $("input[type=submit]").removeAttr("disabled");
    } else {
        $("input[type=submit]").attr("disabled", "disabled");
    }    
});

JSFiddle

edited Mar 22 '13 at 13:41

answered Mar 22 '13 at 13:16

Sergio

6,900
5
31
55

not working , should I write $("input[name=submit]").removeAttr("disabled"); as it is ? – Nil Mar 22 '13 at 13:31
@Nil updated answer (submit was disabled on checkbox checked) – Sergio Mar 22 '13 at 13:42
It wasn't working for you cause you don't have name on your submit, so changed selector to `type=submit` – Sergio Mar 22 '13 at 13:44
sorry, but I am not getting – Nil Mar 22 '13 at 14:26

score 0 · Answer 3 · answered Mar 22 '13 at 13:22

0

Try this:

$(function(){
    $('.optionChk').click(function(){
        $('input[type="submit"]').toggle('fast');
    });

});

and the HTML:

<div>
         <input type="checkbox" class="optionChk" value="1" checked="checked" /> Paid
    </div>

<input type="submit" value="Create"  />

working FIDDLE

answered Mar 22 '13 at 13:22

Karthik Chintala

5,465
5
30
60

how to set unchecked in the beginning ? – Nil Mar 22 '13 at 13:39
@Nil just remove checked property from the checkbox – Karthik Chintala Mar 22 '13 at 13:46

score 0 · Answer 4 · answered May 07 '14 at 12:20

Disable Submit Button:

$(".optionChk").on("change", function () {

if ($(this).is(":checked")) 
{
$("input[type='submit']").attr('disabled',false); //button will be enabled
}
else
{
$("input[type='submit']").attr('disabled',true); //button will be disabled
}
})

Code to enable or disable submit button :

$("input[type='submit']").attr('disabled',true); //button will be disabled

how to make button disabled using JQuery?

4 Answers4