html jquery disable button on value

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, Mar 13 '18 at 12:58

score 10 · Accepted Answer · answered Mar 13 '18 at 12:48

10

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

answered Mar 13 '18 at 12:48

vikalp

330
2
9

2

It would be helpful to add an explanation to your answer so the OP will learn why this works. – Sam Mar 13 '18 at 13:14

score 1 · Answer 2 · answered Mar 13 '18 at 12:54

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>

score 0 · Answer 3 · answered Mar 13 '18 at 12:47

0

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

answered Mar 13 '18 at 12:47

Alexandru Nicolae

1
1

works will to disable. how would you enable it back? $('#submitBtn').attr('enabled', 'enabled'); doesnt work. – Jacel Mar 13 '18 at 12:53
$('#submitBtn').removeAttr('disabled'); || $('#submitBtn').attr('enabled', 'disabled'); Any of those work. – Alexandru Nicolae Mar 14 '18 at 13:52

score 0 · Answer 4 · answered Mar 13 '18 at 12:56

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!

html jquery disable button on value

4 Answers4