How to disable X's an O's in Javascript Tic Tac Toe game

For short, I know the question doesn't make that sense, let me clear things up, if i click on the O's it changes to X and vise versa how can i fix this? Like I don't know how to disable them to stay put and also do you guys know how can I reset the game with a for loop instead of doing it manually

HTML:

<!DOCTYPE html>
<html>
   <head>
      <title>Tic Tac Toe</title>
      <script text="javascript" src="tic.js"></script>
      <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <center>
      <body>
         <h1 style="font-family:arial;">Tic-Tac-Toe</h1>
         <table>
            <tr>
               <td id = "case1" onclick="display_input('case1')"></td>
               <td id = "case2" onclick="display_input('case2')"></td>
               <td id = "case3" onclick="display_input('case3')"></td>
            </tr>
            <tr>
               <td id = "case4" onclick="display_input('case4')"></td>
               <td id = "case5" onclick="display_input('case5')"></td>
               <td id = "case6" onclick="display_input('case6')"></td>
            </tr>
            <tr>
               <td id = "case7" onclick="display_input('case7')"></td>
               <td id = "case8" onclick="display_input('case8')"></td>
               <td id = "case9" onclick="display_input('case9')"></td>
            </tr>
         </table>
         <footer>
            <p>Copyright&copy; 2014</p>
         </footer>
      </body>
   </center>
</html>

Javascript:

var player_one = 1;
function display_input(square){ 

    if ( player_one == 1 ){
        document.getElementById(square).innerHTML = "X";
        player_one = 0;

    } else {
        document.getElementById(square).innerHTML = "O";    
        player_one = 1;
    }
}

function reset() {

    document.getElementById("case1").innerHTML = "";
    document.getElementById("case2").innerHTML = "";
    document.getElementById("case3").innerHTML = "";
    document.getElementById("case4").innerHTML = "";
    document.getElementById("case5").innerHTML = "";
    document.getElementById("case6").innerHTML = "";
    document.getElementById("case7").innerHTML = "";
    document.getElementById("case8").innerHTML = "";
    document.getElementById("case9").innerHTML = "";
}

Solution

You can always check that the square element is empty, and if it is not, then don't perform any action:

function display_input(square) {
    //We get the associated DOM element
    var element = document.getElementById(square);

    //If the element already contains something, then don't change it
    if(element.innerHTML != "") return;

    if(player_one == 1) {
        element.innerHTML = "X";
        player_one = 0;
    } else {
        element.innerHTML = "O";
        player_one = 1;
    }
}