функция щелчка, чтобы стрелять только один раз, потом никогда

Question

Я пытаюсь заключить сделку или не заключить сделку, когда пользователи, загружающие страницу в первый раз, должны щелкнуть поле, чтобы выбрать его в качестве своей. После этого они переходят к щелчку по различным полям.

Однако я не знаю, как сделать так, чтобы моя функция выбора ящика выполнялась только одним щелчком мыши! *

jQuery(document).ready(function($) {

    function noop() {};

    function chooseBox() {

        $(".box").on( "click", function( event ) {
            $boxID = $(this).attr('id');
            $boxValue = $(this).attr('rel');
            $boxNumber = $boxID.replace('box','');
            $usersBox = $("#users-box span");

            $usersBox.html($boxNumber);
            $usersBox.attr('rel', $boxValue);
            $usersBox.addClass('chosen');

            chooseBox = noop;
        });
    }

    chooseBox();
});

HTML:

<div class="boxes">
    <ul class="box-choices">
        <li id="box1" class="box" rel="30.00"><span>1</span></li>
        <li id="box2" class="box" rel="25.00"><span>2</span></li>
        <li id="box3" class="box" rel="5.00"><span>3</span></li>
        <li id="box4" class="box" rel="2.50"><span>4</span></li>
        <li id="box5" class="box" rel="225.00"><span>5</span></li>
    </ul>
    <ul class="box-choices">
        <li id="box6" class="box" rel="75.00"><span>6</span></li>
        <li id="box7" class="box" rel="15.00"><span>7</span></li>
        <li id="box8" class="box" rel="10.00"><span>8</span></li>
        <li id="box9" class="box" rel="7.50"><span>9</span></li>
        <li id="box10" class="box" rel="0.01"><span>10</span></li>
        <li id="box11" class="box" rel="300.00"><span>11</span></li>
    </ul>
    <ul class="box-choices">
        <li id="box12" class="box" rel="100.00"><span>12</span></li>
        <li id="box13" class="box" rel="50.00"><span>13</span></li>
        <li id="box14" class="box" rel="0.50"><span>14</span></li>
        <li id="box15" class="box" rel="1.00"><span>15</span></li>
        <li id="box16" class="box" rel="275.00"><span>16</span></li>
        <li id="box17" class="box" rel="200.00"><span>17</span></li>
    </ul>
    <ul class="box-choices">
        <li id="box18" class="box" rel="150.00"><span>18</span></li>
        <li id="box19" class="box" rel="125.00"><span>19</span></li>
        <li id="box20" class="box" rel="250.00"><span>20</span></li>
        <li id="box21" class="box" rel="175.00"><span>21</span></li>
        <li id="box22" class="box" rel="20.00"><span>22</span></li>
    </ul>
</div>