How to get checkboxes to behave like radio buttons with using the same name

Question

$("input[name='yesFollowup']").on(element_click, function(e){
            if($(this).attr("id") == "yesFollowup"){
                $(".phone_number_yes").show();
            }else{
                $(".phone-number").hide();   
            }
        });

        $('input.followUp:checkbox').on('change', function() {
            $('input.followUp:checkbox').prop({
                'checked': false,
                'disabled': false
            }).removeClass('active');
            $(this).prop({
                'checked': true,
                'disabled': true
            }).addClass('active');
        });

input[type=checkbox] {
    position: relative;
    width: 22px;
    height: 22px;
    border: 1px solid #fff;
    vertical-align: -5px;
    color: #fff;
}

input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
}

[type=checkbox], [type=radio] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    margin-left: 8px;
    margin-right: 20px;
}

input[type=checkbox]::before {
    content: "✔";
    position: absolute;
    font-size: 1.2em;
    right: 0;
    top: -0.3em;
    color: #ffffff;
    visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
.col-sm-2.dealer-item#dealer-item-b.flex-container
    

                    .radio-like-checkboxes(data-validation='required').form-check
                            label(for="yesFollowup")= __('YES')
                            input#yesFollowup(type="checkbox",name='yesFollowup', value="yes", data-value='phone_number_yes')  

                    .radio-like-checkboxes.form-check
                            label(for="noFollowup")= __('NO')
                            input#noFollowup(type="checkbox",name='noFollowup', value="no")

At the moment both checkboxes are "checkable" but I would like to have only one checked at a time and to have the check of the other removed when the other is populated.

further, im not sure how to go about ensuring that the "telephone" field is displayed ONLY when the "yes" box is populated and hidden when "no" box is populated.

Answer 1

Why not use radio buttons that look like checkboxes, using CSS?

The advantage is no code at all, for that... And that exclusiveness behavior already exist with radio buttons... So use it. Nothing stops you from making them look square with a checkmark.

About the the phone number... Use the radio value comparison to toggle the phone input's display.

$("[name='call']").on("click",function(){
    $(".phone").toggle($(this).val()=="yes");
});

.container{
  background:#000;
  color:#fff;
  height:1.8em;
  padding:0.2em;
}

input[type='radio'] {
  position: relative;
  width: 22px;
  height: 22px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  margin-left: 8px;
  margin-right: 20px;
  opacity:1;
}

/* The square box */
input[type='radio']:before {
  content: "";
  position: absolute;
  font-size: 1.2em;
  right: 0;
  top: 0;
  width:1.3em;
  height:1.3em;
  color: #888;
  border:1.2px solid black;
  border-radius:3px;
  background:#fff;
}

/* The checkmark */
input[type='radio']:checked:after {
  content: "✔";
  position: absolute;
  font-size: 1.6em;
  right: 0.15em;
  top: -0.2em;
  color: #000;
}

.phone{
  transform: translateY(-0.4em);
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  Yes <input type="radio" name="call" value="yes"> No<input type="radio" name="call" value="no"> <input type="text" class="phone" name="phone" placeholder="Your phone #">
</div>