Refresh a Static Div With Javascript

Question

I am curious if this is even possible...

From my search, I found this question here on SO, but it seems to be a bit different from my predicament.

For those not caring to check the post, someone is trying to refresh a div just by pressing a radio button (that is placed within the same div being replaced). It seems from the answers, that it was successful.

My Issue

I am working on a project that is set up in this manner:

• Row of radio buttons indicating how many days of the week they want to select (3 or 5 days), or just 1 day.
• If the user selects 1 day, there is an invisible div under the row that does not appear.
• If the user selects 3 or 5 days, an invisible div is then shown under the row with another row, containing the days of the week.
• If the user selects 3 days, they are only able to click on 3 of the days, and the other 4 are then disabled (these "day" buttons are checkboxes)
• If the user selects 5 days, you guessed it, they can then select 5 days.
• If the user then reselects 3 days, then they must unselect all of the days, and reselect them in order for the 3 day limit to be enforced, considering they've selected days already with 5 days being selected.
• When a checkbox is selected, a CSS style is activated on it and then the color of it changes.

What I am trying to do

I am trying to make my layout work in this manner:

• If a user selects 5 days, do business as usual.
• If the user then selects 3 days, I want the invisible div (now visible because one day was not the option selected) to refresh itself: By this, I mean have the CSS style removed and all checkboxes, unchecked.

My Code

$("document").ready(function() {
  $('input[name=timing]').on('change', function() {
    if ($(this).prop('id') == "one") {
      $('#recurrence_time').html('One Time');
      $('.day-selections').hide();
    } else if ($(this).prop('id') == "thrice") {
      $('#recurrence_time').html('3 Times a Week');
      $('.day-selections').show();
    } else if ($(this).prop('id') == "once") {
      $('#recurrence_time').html('Once a Week');
      $('.day-selections').hide();
    } else if ($(this).prop('id') == "custom") {
      $('#recurrence_time').html('Custom');
      $('.day-selections').show();
    }
  });
});

$(":checkbox[name=day]").change(function() {
  if ($('input#thrice').is(':checked')) {
    var len = 3;
  } else if ($('input#custom').is(':checked')) {
    var len = 5;
  }
  if ($(":checkbox[name=day]:checked").length == len) {
    $(':checkbox:not(:checked)').prop('disabled', true);
  } else {
    $(':checkbox:not(:checked)').prop('disabled', false);
  }
});

function updateHighlightRadio() {
  var selected = this.parentNode.parentNode.getElementsByClassName("selected")[0];
  if (selected) selected.className = selected.className.replace(" selected", "");
  this.parentNode.className += " selected";
}

window.onload = function() {
  var radios = document.querySelectorAll("input[type=radio]");
  for (var i = 0; i < radios.length; ++i) {
    radios[i].onchange = updateHighlightRadio;
  }
}

$("input[type='checkbox']").change(function() {
  $(this).closest("label").toggleClass(" selected");
});

.selected {
  background-color: #FF8C00;
  color: #FFFFFF;
}

.how-often p {
  font-weight: bold;
  text-align: left;
  display: inline;
  float: left;
}


/* button label */

.recurrence {
  border-radius: 8px;
  padding: 1em;
  margin: 0.5em;
  border-radius: 5px;
  background-color: #ffd199;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  width: 115px;
  text-align: center;
  font-size: 12px;
}


/* remove radio button */

.recurrence input {
  visibility: hidden;
  position: absolute;
}


/* color change when hovering */

.recurrence:hover {
  background-color: #FF8C00;
}

.days {
  border-radius: 8px;
  padding: 1em;
  margin: 0.5em;
  border-radius: 5px;
  background-color: #ffd199;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  font-size: 12px;
  width: 75px;
}


/* remove radio button */

.days input {
  visibility: hidden;
  position: absolute;
}


/* color change when hovering */

.days:hover {
  background-color: #FF8C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="how-often pricing">
  <p>How often?</p>
  <label class="recurrence">
                            <input required id="one" name="timing" type="radio">Once
                        </label>
  <label class="recurrence">
                            <input id="once" name="timing" type="radio">Once a week
                        </label>
  <label class="recurrence">
                            <input id="thrice" name="timing" type="radio">3 Times a week
                        </label>
  <label class="recurrence">
                            <input id="custom" name="timing" type="radio">Custom
                        </label>
  <hr>
</div>

<!--start day selection section-->
<div class="day-selections" style="display: none;">
  <p>Which days?</p>
  <label class="days">
                            <input id="mon" name="day" type="checkbox">
                            Monday
                        </label>
  <label class="days">
                            <input id="tue" name="day" type="checkbox">
                            Tuesday
                        </label>
  <label class="days">
                            <input id="wed" name="day" type="checkbox">
                            Wednesday
                        </label>
  <label class="days">
                            <input id="thu" name="day" type="checkbox">
                            Thursday
                        </label>
  <label class="days">
                            <input id="fri" name="day" type="checkbox">
                            Friday
                        </label>
  <hr>
</div>

Note: I cannot get the buttons to stay the new color once they are selected in my snippet for some reason...

Answer 1

Here you go. The changes you need to make:

• Add classes and ID as demonstrated and instead of using javascript, you can just make use of CSS :checked selector and change the styles when selected.

• Keep your labels and inputs seperate and not nested, this way you can use the for attribute in label to connect to the checkbox and hide the checkbox using CSS display:none.

• For unchecking the checkboxes when another radio button is selected just make sure to remove the attribute checked from all the checkboxes as shown in the code for each if-else conditions $('input.day').removeAttr('checked'); , compare the limit value for each of your radio buttons and if it exceeds the limit use the code and return it to false so no further checkboxes can be selected.

  if ($(this).siblings(':checked').length >= limit) { this.checked = false; }

$("document").ready(function() {

  $(".day-selections").hide();
  var limit = 0;
  $(':radio').click(function() {
    if ($('.notone').is(':checked')) {
      $(".day-selections").show();
      if ($('#thrice').is(':checked')) {
        limit = 3;
        $('input.day').removeAttr('checked');
        $('input.day').on('change', function(evt) {
          if ($(this).siblings(':checked').length >= limit) {
            this.checked = false;
          }
        });
      } else if ($('#custom').is(':checked')) {
        limit = 5;
        $('input.day').removeAttr('checked');
        $('input.day').on('change', function(evt) {
          if ($(this).siblings(':checked').length >= limit) {
            this.checked = false;
          }
        });
      }
    } else {
      $('input.day').removeAttr('checked');
      $(".day-selections").hide();
    }
  });

});

.selected {
  background-color: #FF8C00;
  color: #FFFFFF;
}

.how-often p {
  font-weight: bold;
  text-align: left;
  display: inline;
  float: left;
}


/* button label */

.recurrence {
  border-radius: 8px;
  padding: 1em;
  margin: 0.5em;
  border-radius: 5px;
  background-color: #ffd199;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  width: 115px;
  text-align: center;
  font-size: 12px;
}


/* remove radio button */

.recurrence input {
  visibility: hidden;
  position: absolute;
}


/* color change when hovering */

.recurrence:hover {
  background-color: #FF8C00;
}

.days {
  border-radius: 8px;
  padding: 1em;
  margin: 0.5em;
  border-radius: 5px;
  background-color: #ffd199;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  font-size: 12px;
  width: 75px;
}

.day:checked+.days {
  background-color: #FF8C00;
}

.option {
  display: none;
}

.option:checked+.recurrence {
  background-color: #FF8C00;
}


/* remove radio button */

.day {
  display: none;
}

.days-selection {
  display: flex;
}


/* color change when hovering */

.days:hover {
  background-color: #FF8C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="how-often pricing">
  <p>How often?</p>

  <input required id="one" class="option" name="timing" type="radio">
  <label class="recurrence" for="one">Once</label>

  <input id="once" name="timing" class="option" type="radio">
  <label class="recurrence" for="once">Once a week</label>

  <input id="thrice" class="notone option" name="timing" type="radio">
  <label class="recurrence" for="thrice">3 Times a week</label>

  <input id="custom" class="notone option" name="timing" type="radio">
  <label class="recurrence" for="custom">Custom</label>
  <hr>
</div>
<!--start day selection section-->
<div class="day-selections" style="display: none;">
  <input id="mon" class="day" name="day" type="checkbox">
  <label class="days" for="mon">Monday
	</label>
  <input id="tue" class="day" name="day" type="checkbox">
  <label class="days" for="tue">Tuesday
	</label>
  <input id="wed" class="day" name="day" type="checkbox">
  <label class="days" for="wed">Wednesday
	</label>
  <input id="thu" class="day" name="day" type="checkbox">
  <label class="days" for="thu">Thursday</label>
  <input id="fri" class="day" name="day" type="checkbox">
  <label class="days" for="fri">Friday
	</label>
  <hr>
</div>