enable and disable textbox depending on a checkbox

Question

I'm trying to disable a textbox if a checkbox is not checked , and enable it if the checkbox is checked in javascript

here is my code but it's not working :

        if($productsArray[$i])
        {
        $productName = $productsArray[$i]->getProductName() ;
        $id = $productsArray[$i]->getId(); 
        $product = $control->getNonFreshProductById($id); 
        $personAmount  = $product->getPersonAmount() ; 

        echo "<tr>";
        echo "<th  td valign='middle' > <br/> <input type='checkbox' name='nonFreshProduct".$i."' id ='nonFreshProduct".$i."' style='position:absolute; left:20%' onclick='document.getElementById('outcome".$i."').disabled=!this.checked;'/>".$productName."</th>";
        echo "<th  td valign='middle' style='text-align:-webkit-left'> <br/> <input type='text' name='outcome".$i."' id ='outcome".$i."'/></th>";
        echo "<input type='hidden' name='nfid".$i."' id='nfid".$id."' value='".$id." ' /></th>";
        echo "</tr>";
    }

Please don't put all those HTML in a string – Anton Aug 11 '14 at 20:15 — Anton, Aug 11 '14 at 20:15

score 0 · Answer 1 · edited May 23 '17 at 10:33

0

With jQuery you can do:

$( '#myInput' ).prop( 'disabled', $('#mycheckBox').is( ':checked' ) );

http://api.jquery.com/prop/

http://api.jquery.com/is/

Without jQuery you can do:

document.getElementById('myInput').disabled = document.getElementById('mycheckBox').checked;

This method is kind of dirty, I've found this question and answer to be more to my liking:

Toggle Disabled Attribute on Input Based on Checkbox in jQuery

edited May 23 '17 at 10:33

Community

1
1

answered Aug 11 '14 at 19:47

Matt Wagner

910
7
14

This only disables it if the checkbox is checked, it doesn't enables it when it's unchecked – Anton Aug 11 '14 at 19:56
See the edit. Adding an else statement and adjusting the prop should toggle it. – Matt Wagner Aug 11 '14 at 19:58
1

thank you Matt .. I got the idea and I used the same logic in my code it's just not working I'm not sure why :( – Haya D Aug 11 '14 at 19:59

George · Answer 2 · 2014-08-11T21:45:47.540

All you have to do is to have a handler listening to the change event of the checkbox, and then enable/disable based on the event.

jsfiddle example: http://jsfiddle.net/w9u09ohc/

sample code:

Edit: to use javascript in PHP, all you have to do is put the script in a script tag

<script type="text/javascript">
    function enableElement(element) {
        $(element).removeAttr('disabled');
    }

    function disableElement(element) {
        $(element).attr('disabled', 'disabled');
    }

    function checkboxChangeHandler() {
        var checkbox = $('#ckb'),
            textbox = $('#txb');

        if(checkbox.is(':checked'))
        {
            enableElement(textbox);
        }
        else
        {
            disableElement(textbox);
        }
    }


    $('#ckb').on('change', checkboxChangeHandler);
</script>

Thanks for answering. but can I put this code inside my PHP code ? — Haya D, Aug 11 '14 at 20:27
I believe so, all you have to do is to add the script tag, see edit. — George, Aug 11 '14 at 21:46

enable and disable textbox depending on a checkbox

2 Answers2