Radio and checkbox cannot be checked when inside BootStrap Modal

46
March 03, 2021, at 09:40 AM

I have a bootstrap modal that needs to have both radio´s and checkboxes, and when I place the below code outside the Modal they work as expected, but as soon as I move them inside the modal I am not able to check/choose them .. I am using Bootstrap v. 4.6.0.

The Radio button code:

<div class="form-check form-check-inline">
 <input class="form-check-input" type="radio" name="Pension" id="PensionYES" value="yes" CHECKED>
 <label class="form-check-label" for="PensionYES">Ja</label>
</div>
<div class="form-check form-check-inline">
 <input class="form-check-input" type="radio" name="Pension" id="PensionNO" value="no">
 <label class="form-check-label" for="PensionNO">Nej</label>
</div>

I did find a hack that works, using jQuery, but that does not work when CHECKED has been preset, also I am uncertain if it will work when submitting the form (if the chosen value is transmitted) .. and lastly I think this is a weird behavior, I should not need to use jQuery for this to work.

The temporary hack:

<script>
jQuery(".modal input:checkbox,.modal label").on("click", function(e)
{
    e.stopImmediatePropagation();
    var element = (e.currentTarget.htmlFor !== undefined) ? e.currentTarget.htmlFor : e.currentTarget;
    var checked = (element.checked) ? false : true;
    element.checked = (checked) ? false : checked.toString();
});
jQuery(".modal input:radio,.modal label").on("click", function(e)
{
    e.stopImmediatePropagation();
    var element = (e.currentTarget.htmlFor !== undefined) ? e.currentTarget.htmlFor : e.currentTarget;
    var checked = (element.checked) ? false : true;
    element.checked = (checked) ? false : checked.toString();
});
</script>

Anyone who can help with a good solution for this? :-)

Best Regards

Stig

READ ALSO
linear-gradient over Gatsby-Background-Image

linear-gradient over Gatsby-Background-Image

I have an image that I reference from with a Graphql query in my codeOver this image I want to have a linear-gradient, which is located in my css module

79
Tomcat 9 class loading issue with Jaxb-impl&amp; jaxb-runtime

Tomcat 9 class loading issue with Jaxb-impl& jaxb-runtime

Jaxb-api and jaxb-runtime has same package with same class name called RUNTIMEMODELBUILDERJAVA and same interface with same package Navigator interface

61
Regular expression that accepts only letters, spaces in between words and hyphens after word

Regular expression that accepts only letters, spaces in between words and hyphens after word

I'm trying to write a regular expression to capture what I mentioned above but for the hyphen part, it seems like it still matches words that start with a hyphen

65