Bootstrap How-to: checkbox should change text input value when selected/checked

I just started with HTML/CSS/JavaScript and running into a (hopefully) small obstacle while testing Bootstrap.

My code:

<div class="form-group">
    <div class="col-sm-2">
        <input type="text" class="form-control" id="text1" name="text1" value="Initial Value" readonly>
    </div>
    <div class="checkbox col-sm-10">
        <label>
            <input type="checkbox" id="checkbox" data-toggle="collapse" data-target="#collapse3rdParty"
                   aria-expanded="false" aria-controls="collapse3rdParty">
            Select to change value
        </label>
    </div>
</div>

<div class="collapse" id="collapse3rdParty">
    <div class="form-group form-group-lowermargin">
        <div class="col-sm-offset-2 col-sm-10">
            <input type="text" class="form-control" id="inputName" name="inputName" placeholder="Name">
        </div>
    </div>
</div>

Live Demo also on JSFiddle.

What I already managed to achieve is 'collapsing out' an input field when the checkbox is checked.

What I couldn't find was any info on how to make that same checkbox change the value of the read-only text input (or maybe I didn't get it).

By default, i.e. when loading the page, it should have an initial value. When the checkbox gets checked, the value of the text input should get altered (so e.g. changing 'value="Initial Value"' to 'value="New Value"').

Is this possible without having to use JavaScript?

Any help on how to do this (either by CSS or JS) is highly appreciated ;-)