Search code examples
javascriptformsinputradio-button

Selection one "input" with help "radio"


I would like to be able to do only one enabled input type text when selecting for help input type radio.

I can check multiple boxes with a checkbox which works as I want. On this basis, I made a selection using input type radio, which unfortunately does not work properly. Each first selection of radio makes input "always" enabled. And I want only one of the fields that is currently selected to be enabled and the others disabled.

Code with using input type Checkbox(works correctly)

<script>
function disable(checkbox,form){
    if(document.getElementById(checkbox).checked == true){
        document.getElementById(form).disabled = false
    }else{
        document.getElementById(form).disabled = true
    }
}
</script>
<label>Name:<br><input type="checkbox" id="chbx_name" onclick="disable('chbx_name','name')"><input type='text' id="name" name="name" value='<?php echo $row['name'] ?>' disabled></label>
<label>Data:<br><input type="checkbox" id="chbx_data" onclick="disable('chbx_data','data')"><input type='date' id="data" name="data" value='<?php echo $row['data'] ?>' disabled>
</label>
<label>Hour:<br><input type="checkbox" id="chbx_hour" onclick="disable('chbx_hour','hour')"><input type='time' id="hour" name="hour" value='<?php echo $row['hour'] ?>' disabled>
</label>

Code with using input type radio(works incorrectly)

<script>
    function disable(radio,form){
        if(document.getElementById(radio).checked == true){
                    document.getElementById(form).disabled = false
        }else{
            document.getElementById(form).disabled = true
        }
    }
</script>
<?php
    $result = $mysqli->query("SELECT picture_name FROM film_pictures WHERE IDpicture = ".$id);
    while($row=$result->fetch_array()){
            $i=0;
            $i++;                                           
                ?><label><input type="radio" id="radio_picture_name<?php echo $i ?>" onclick="disable('radio_picture_name<?php echo $i ?>','picture_name<?php echo $i ?>')"><input type="text" id="picture_name<?php echo $i ?>"  name="picture_name" value="<?php echo $row['picture_name'] ?>" style="width:450px" ></label>
<?php } ?>

Solution

  • first if you need to "turn off" other radio inputs, you have to give them same "name" attribute

    <script>
        function disable(radio) {
            for (const element of document.getElementsByClassName("picture_name_input")) element.disabled = true;
            radio.closest("label").querySelector("input[type=text]").disabled = false;
        }
    </script>
    <div class="labels">
        <?php for ($i = 0; $i < 10; $i++) { // Just Replace
            $row = [                        // With your php loop
                "picture_name" => "picture name"
            ];
            ?>
            <label>
                <input type="radio" name="picture_radio" id="radio_picture_name<?php echo $i ?>" 
                onclick="disable(this)"> <!-- as an argument you can give the element by "this" -->
                <input class="picture_name_input" type="text" id="picture_name<?php echo $i ?>" name="picture_name" value="<?php echo $row['picture_name'] ?>" style="width:450px">
            </label>
        <?php } ?>
    </div>
    

    if i understand right this can help you :)