选中复选框后禁用它

Question

I am using JSF and Javascript

Checkbox

<h:selectBooleanCheckbox onclick="handlePaymentButtons()" 
class="chkBox"></h:selectBooleanCheckbox>Yes I agree terms and Conditions

JS

<script>
            function handlePaymentButtons(){
                console.log("we are here..");

                var box = document.getElementsByClassName("chkBox");
                box.disabled =true;
                console.log(box);
                gButton.enable();

            }
        </script>

I simply want to disable the currently checked checkbox.

but i can still check/uncheck the checkbox.

Answer 1

That's a HTMLCollection , a collection, returned value of getElementsByClassName . You either need to iterate through it or get a specific element by index from the collection. Since the .length of the collection is 1 , you can simply code box[0].disabled = true .

Alternatively, you can also use querySelector which returns only one element (if any):

var box = document.querySelector(".chkBox");
box.disabled = true;