JavaScript按钮启用和禁用PHP

Question

I have a while loop that fetches data from a database. I have made three buttons:

> Open  
> Hold   
> Close

The first time when the page loads, only the open button should be enabled, and the others should be disabled.

After I click the open button, the open button should be disabled, and the hold and close buttons should be enabled.

I got this result for only one row, but in the while loop not for all the rows.

I have used JavaScript with php.

Example:

function onload()
{
    document.getElementById("Hold").disabled = true;
    document.getElementById("close").disabled = true;
    return false; 
}

The above code was working for the first row, but I need it to work for all the while loop values.

Answer 1

Your problem lies in that you are using the same ID for multiple elements - ID's must be unique to each element, and thus, getElementById returns ONE element, with that ID. Give them classes instead.

Answer 2

HTML

<input type="button" value="Open" id="openButton" name="openButton">
<input type="button" value="Hold" id="holdButton" name="holdButton" disabled="disabled">
<input type="button" value="Close" id="closeButton" name="closeButton" disabled="disabled">

jQuery

$(document).on('click','input[type=button]', function() {
               buttonVal = $(this).val();
    if(buttonVal == 'Open' )
    {
        $(this).prop("disabled", true);
        $('#holdButton,#closeButton').prop("disabled", false);
    }
    else
    {
         $('#holdButton,#closeButton').prop("disabled", true);
         $('#openButton').prop("disabled", false);
    }
});

DEMO