Let two radio-buttons behave as one checkbox

Question

Is it possible, without big modification, to have two radio-buttons, which will be displayed as one checkbox?

Actually we're facing the problem, that we're submitting form data which will be automatically processed by our system and this isn't possible if we're using checkboxes. Until now we were using two radio buttons (Enable X: Yes | No) but our current customer wants one checkbox instead.

We know, that it would be much more easy if we'd extend our backend, but unfortunaly this is not possible.

Edit: We're having access to the backend and we could change the validation behavior, but in our opinion this would be much more effort than frontend changes. Also we would like to avoid using JS (as long as its possible).

Thanks in advance.

Answer 1

You can try to use Css

    input[id^="radio"] {
        display: none;
    }

    input[id^="radio"]:checked+label {
        display: none;
    }

    input[id^="radio"]+label {
        content: '';
        height: 15px;
        width: 15px;
        display: inline-block;
        border: 1px black solid;
        position: relative;

    }

    input[id^="radio"]+label:first-of-type::after {
        content: '';
        height: 10px;
        width: 5px;
        border-right: solid black 3px;
        border-bottom: solid black 3px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-60%) rotate(30deg);
    }

    input[id^="radio"]+label {
        display: none;
    }

    input[id^="radio"]:not(checked)+label {
        display: inline-block;
    }

<input type="radio" checked name="radioCb" id="radio1"><label for="radio1"></label>

<input type="radio" name="radioCb" id="radio2"><label for="radio2"></label>