CODEWITHSUNDEEP
javascriptjqueryhtml
ethio
ethio

Reputation: 539

JQuery code to disable input field with a check box not working

I'm trying to disable the price input field when the checkbox is ticked and remove any text. I don't know what I'm doing wrong here..

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
    $('#confP').change(function(){
        if ($('#confP').is(':checked') == true){
            $('#price').val('').prop('disabled', true);
            console.log('checked');
        } else {
            $('#price').prop('disabled', false);
            console.log('unchecked');
        }
    });
</script>

<input type="checkbox" id="confP" name="confP" value="productType"?>Configurable Product?

Price <input type="text" id="price" name="price"/>

Upvotes: 0

Views: 603

Answers (3)

Muhammad Rashid
Muhammad Rashid

Reputation: 583

Try this,you missed $( document ).ready(function() { Fiddle

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript">
$( document ).ready(function() {
    $('#confP').change(function(){
        if ($('#confP').is(':checked') == true){
            $('#price').val('').prop('disabled', true);
            console.log('checked');
        } else {
            $('#price').prop('disabled', false);
            console.log('unchecked');
        }
    });
 });
</script>

<input type="checkbox" id="confP" name="confP" value="productType"?>Configurable Product?

Price <input type="text" id="price" name="price"/>

Upvotes: 1

Mutant
Mutant

Reputation: 3821

Specify your script content in $(document).ready(function(){...}); 

$(document).ready(function(){
    $('#confP').change(function(){
        if ($('#confP').is(':checked') == true){
            $('#price').val('').prop('disabled', true);
            console.log('checked');
        } else {
            $('#price').prop('disabled', false);
            console.log('unchecked');
        }
    });
  });

Upvotes: 1

TonyMtz
TonyMtz

Reputation: 46

Use this to disable:

$('#price').attr('disabled', true);

And this to enable later:

$('#price').removeAttr('disabled');

Cheers.

Upvotes: -1

Related Questions