html jquery disable button on value [duplicate]

Question

<html>
   <head>
       <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
   </head>
   <body>
      <script>
         function checkValue() {         
         var id=$('#testValue').val();
         if(id < 10){
                $('#bb').text("value is LESS than 10. Disable Submit button please!");
                $('#submitBtn').disabled = true;
            }else{
                $('#bb').text("value is MORE than 10. Enable submit button please!");
                $('#submitBtn').disabled = false;
            }
         }
        function testSubmit(){
            alert('test submit clicked.');
        }
      </script>
      input value:
      <input type="text"  id="testValue" maxlength="6" size="10" required>
      <button type="button" name="action" onclick="checkValue()"    value="issueInvoice">TEST VALUE</button>
      <p style="text-align:left" class="txt-centered label-registersuccess font-red" id="bb"></p>
      <button type="button" name="action" id="submitBtn"  onclick="testSubmit()"    value="issueInvoice">submit button</button> 
   </body>
</html>

I have this simple form. I input a value. If less than TEN, a text is shown, 'value less than 10'. I also want to disable the button on this condition. how do i do it? Then when value is more than TEN, a ''value more than 10 is shown' and button enabled.

how do i do this? $('#submitBtn').disabled = true; does not work :(

Please find updated code on below answer. Accept it if it works :) — Jenil Kanani
– Jenil Kanani, Commented Mar 13, 2018 at 12:58

vikalp · Accepted Answer · 2018-03-13 12:48:03Z

10

$('#submitBtn').prop('disabled', true);

answered Mar 13, 2018 at 12:48

vikalp

3302 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sam Over a year ago

It would be helpful to add an explanation to your answer so the OP will learn why this works.

Renzo Calla · Accepted Answer · 2018-03-13 12:54:18Z

You can use attr and removeAttr properties to solve it...

         function checkValue() {         
         var id=Number($('#testValue').val());
         if(id < 10){
                $('#bb').text("value is LESS than 10. Disable Submit button please!");
                $('#submitBtn').removeAttr('disabled');
            }else{
                $('#bb').text("value is MORE than 10. Enable submit button please!");
                $('#submitBtn').attr('disabled','true');
            }
         }
        function testSubmit(){
            alert('test submit clicked.');
        }

       <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

 
      input value:
      <input type="text"  id="testValue" maxlength="6" size="10" required>
      <button type="button" name="action" onclick="checkValue()"    value="issueInvoice">TEST VALUE</button>
      <p style="text-align:left" class="txt-centered label-registersuccess font-red" id="bb"></p>
      <button type="button" name="action" id="submitBtn"  onclick="testSubmit()"    value="issueInvoice">submit button</button>

Alexandru Nicolae · Accepted Answer · 2018-03-13 12:47:27Z

0

$('#submitBtn').attr('disabled', 'disabled'); should do the trick

answered Mar 13, 2018 at 12:47

Alexandru Nicolae

12 bronze badges

2 Comments

Jacel Over a year ago

works will to disable. how would you enable it back? $('#submitBtn').attr('enabled', 'enabled'); doesnt work.

Alexandru Nicolae Over a year ago

$('#submitBtn').removeAttr('disabled'); || $('#submitBtn').attr('enabled', 'disabled'); Any of those work.

Jenil Kanani · Accepted Answer · 2018-03-13 12:56:49Z

I prepared the bulletproof code for you. By default submit button will be disabled. Once you start input it will enable/disable as per value.

<html>
   <head>
       <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
   </head>
   <body>
      Input value:
      <input type="text"  id="testValue" maxlength="6" size="10">            
      <button type="button" name="action" id="submitBtn" value="issueInvoice">submit button</button> 
    <script>
        $( document ).ready(function() {
          $('#submitBtn').attr('disabled',true);
          $('#testValue').on('input propertychange paste', function() {                 
             var id=$(this).val();
             if(id < 10){                
                    $('#submitBtn').attr('disabled',true);
                }else{
                    $('#submitBtn').attr('disabled',false);                
                }
           });         

        });
    </script>
   </body>
</html>

Hope this helps!

Collectives™ on Stack Overflow

html jquery disable button on value [duplicate]

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Linked

Related