Changing values of inputs via checkbox change event

Question

I have a page which has two check boxes with different id's along with a text box in different div and radio group consisting of 4 radio buttons in another div. What I'm trying to achieve is:

If user checks the first checkbox the following should happen

checkbox two to be disabled
textbox to have a value of 0 and made readonly
first radio selected and rest hidden along with their labels

If user unchecks the first checkbox the the above steps should be revereted.

If user checks the second checkbox the following should happen

checkbox one to be disabled
textbox to have value of 1 abd made readonly
first radio selected and rest hidden along with their labels

If user unchecks the second checkbox the the above steps should be revereted.

I have come up with the following code

$("#firstCheckBox").on("change", function () {
    if ($(this).is(":checked")) {
        $('#secondCheckBox').prop('disabled', true);
        $('#spinner').val('0');
        $('#spinner').prop('readonly', true);
        $('#radio_id:first').prop('checked', true);
        $('#radio_id:not(:checked)').hide();

    } else {
        $('#secondCheckBox').prop('disabled', false);
        $('#spinner').val('');
        $('#spinner').prop('readonly', false);
        $('#radio_id:first').prop('checked', false);
        $('#radio_id:not(:checked)').show();
    }
});
$("#secondCheckBox").on("change", function () {
    if ($(this).is(":checked")) {
        $('#firstCheckBox').prop('disabled', true);
        $('#spinner').val('1');
        $('#spinner').prop('readonly', true);
        $('#radio_id:first').prop('checked', true);
        $('#radio_id:not(:checked)').hide();

    } else {
        $('#firstCheckBox').prop('disabled', false);
        $('#spinner').val('');
        $('#spinner').prop('readonly', false);
        $('#radio_id:first').prop('checked', false);
        $('#radio_id:not(:checked)').show();
    }
});

So my question, is there a better way of doing this or am I on the right track?

Yes, there is. Use classes and $(this) and you will see that you need only one change event. Also, are you really sure about #radio_id:first ??? Do you have multiple ids that are the same? You shouldn't. — Ionut Necula
– Ionut Necula, Commented Mar 22, 2017 at 15:37
Since this works and you're looking for input on improving it, this question is probably better suited for codereview.stackexchange.com — j08691
– j08691, Commented Mar 22, 2017 at 15:40

Milind Anantwar · Accepted Answer · 2017-03-22 15:48:59Z

1

something like this:

var $targetCheckBoxes = $("#firstCheckBox,#secondCheckBox");
$targetCheckBoxes.change(function () {
  var isChecked = this.checked;
  var currentElement = this;
  $targetCheckBoxes.filter(function(){
    return  this.id  != currentElement.id;
  }).prop('disabled', isChecked );
  $('#spinner').val( isChecked  ? this.value : '');
  $('#spinner').prop('readonly', isChecked);
  $('#radio_id').toggle(isChecked).prop('checked', isChecked );
});

Working Demo

edited Mar 22, 2017 at 15:48

answered Mar 22, 2017 at 15:41

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Izzy Over a year ago

Thanks for this. I've just tried this and it get an error: Uncaught Error: Syntax error, unrecognized expression: [object HTMLInputElement]

Izzy Over a year ago

Thanks, but the radio button are a group of 4 and I want to check the first 1 and hide all the other 3 along with their labels on checkbox checked and on checkbox unchecked I want to uncheck the radio and display all along with their labels

Milind Anantwar Over a year ago

You should not have duplicate ids for element. $('#radio_id:first') is irrelevant as $('#radio_id') will only select first element having that id. You should rather use same class and then use class selector along with :first to target first element in set.

Izzy Over a year ago

I can add a class no problem. But how will the label hide and show the label test next to each radio button

Izzy Over a year ago

This is what I've come up with

$('.radio-class:first').prop('checked', isChecked)         $('.radio-class).not(':checked').toggle(!isChecked).siblings('label').not(':first').toggle(!isChecked);

anyway I can chain the whole thing in one line?

|

Collectives™ on Stack Overflow

Changing values of inputs via checkbox change event

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related