Set checkbox Disable when another is checked

Question

how can I add the class "disabled" to the second checkbox if the first one is selected and vice versa. I don't know where I'm wrong, this is my code, in which I imagined two functions to include where I will turn off the secondary checkbox in each. (maybe it can in one function for sure, but I don't know), this is my example, if someone can correct me where I went wrong, thank you.

function disableNewmobileOption(ev) {
    ev.preventDefault();
    var inputElementLabel = $(ev.currentTarget);
    var inputElement = inputElementLabel.siblings("input");
    if (inputElement.is(':checked')) {
        if (inputElement.attr("id") === "b_mobnr") {
            $(".newmobile .circle-buttons").addClass("disabled");
        } else {
            $(".b_mobnr .circle-buttons").removeClass("disabled");
        }
    } 
}

function disableBMobOption(ev) {
    ev.preventDefault();
    var inputElementLabel = $(ev.currentTarget);
    var inputElement = inputElementLabel.siblings("input");

        if (inputElement.attr("id") === "newmobile") {
            $(".b_mobnr .circle-buttons").addClass("disabled");
        } else {
            $(".newmobile .circle-buttons").removeClass("disabled");
        }
}

<div class="row">
<div class="col-sm-4 newmobile">
    <h4>Optionen</h4>
        <span class="circle-buttons">
        <input type="checkbox" name="b_mobnr" id="b_mobnr" value="0">
            <label for="b_mobnr" onclick="disableNewmobileOption(event)">Mobile Option</label>
                            <div class="check square-check"></div>
                                            </span>
    </div>
                                                                                
<div class="col-sm-12 b_mobnr">
<span class="circle-buttons">
<input type="checkbox" name="newmobile" id="newmobile" value="0">
<label for="newmobile" onclick="disableBMobOption(event)">Newmobile Option </label>
                                                                                                <div class="check square-check"></div>
                                                                                            </span>
                                                                                    </div>
    </div>

I don't understand this UI. Why would you have two checkboxes, one of which is always disabled? Why not just use radio buttons? This is the exact use case they were created for... — Heretic Monkey, Mar 23 '21 at 13:16
@HereticMonkey sorry, i can't use radiobutton, this is a snippet of code. I would have to change everything then. This is an easier solution for me, I think. — Mara, Mar 23 '21 at 13:21

Swati · Answer 1 · 2021-03-23T13:40:35.933

You can use .not() to add disabled class to other span tag when your checkbox is checked.Other way would be passing this inside your function call then depending on if the checkbox is checked add class to other span.

Demo Code :

/*$(".circle-buttons input[type=checkbox]").on("change", function() {
  $(".circle-buttons").removeClass("disabled") //remove from all 
  if ($(this).is(":checked")) {
    $(".circle-buttons").not($(this).closest(".circle-buttons")).addClass("disabled") //other span tag
  }
})*/

function disableNewmobileOption(el) {
  var inputElement = $(el);
  //remove class from all
  $(".circle-buttons").removeClass("disabled");
  //check if checkbox is checked
  if (inputElement.is(':checked')) {
    //add class to other
    $(".b_mobnr .circle-buttons").addClass("disabled");

  }
}

function disableBMobOption(el) {
  var inputElement = $(el);
  $(".circle-buttons").removeClass("disabled");
  if (inputElement.is(':checked')) {
    $(".newmobile .circle-buttons").addClass("disabled");
  }
}

.disabled {
  color: grey;
  pointer-events: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-4 newmobile">
    <h4>Optionen</h4>
    <span class="circle-buttons">
    <!--aded click event on checkbox-->
        <input type="checkbox" name="b_mobnr" id="b_mobnr" onclick="disableNewmobileOption(this)" value="0">
            <label for="b_mobnr" >Mobile Option</label>
                            <div class="check square-check"></div>
                                            </span>
  </div>

  <div class="col-sm-12 b_mobnr">
    <span class="circle-buttons">
<input type="checkbox" name="newmobile" id="newmobile"  onclick="disableBMobOption(this)" value="0">
<label for="newmobile">Newmobile Option </label>
                                                                                                <div class="check square-check"></div>
                                                                                            </span>
  </div>
</div>

Hi @Swati thank you, I can't use this, because I still have a lot of checkboxes on the page, and I think the concept will change, so I have to use at least one function. — Mara, Mar 23 '21 at 13:17
@Mara Instead of waiting for answers to tell people about requirements, include them in the question, please. — Heretic Monkey, Mar 23 '21 at 13:19
@Swati I can't turn this on with you, I need to have a call onclick = "somefunction ()" and add "disable" class on class = "circle-buttons" — Mara, Mar 23 '21 at 13:27

Set checkbox Disable when another is checked

1 Answers1