locked
Bootstrap radio buttons will not fire in Google Chrome work well in IE RRS feed

  • Question

  • User-1528845285 posted

    My radio buttons work normally in Internet Explorer, but in Google Chrome the button don't seem to fire the div.alert_text nor div.question event. So am I missing something in the web kit, or does chrome hit the parent div? I set a debugger and hit it when I run IE, but when I run it in chrome nothing happens, there are bootstrap radio buttons, I put a debugger here and my code:

    The HTML:

     @foreach (var item in Model)
                {
                    var id = item.QuestionID.ToString();
                    var isYesValidAnswer = item.IsYesValidAnswer.Value ? "True" : "False";
                    var isNoValidAnswer = item.IsNoValidAnswer.Value ? "True" : "False";
                    <div class="row" style="background-color:darkgray; height:1px"></div>
                    <div class="question row">
                        <div class="col-md-10">
                            <div class="row"><b>@item.Title</b></div>
                            <div class="row">@item.Question</div>
                            <div class="row">
                                <div class="col-md-1"></div>
                                <div class="col-md-11"><font size="2">@item.YesText</font></div>
                            </div>
                            <div class="row">
                                <div class="col-md-1"></div>
                                <div class="col-md-11"><font size="2">@item.NoText</font></div>
                            </div>
                            <div class="row alert_text">
                                <div class="col-md-12 k-widget k-notification k-notification-error">Alert! @item.AlertMessage</div>
                            </div>
                        </div>
    
                        <div class="anwser col-md-2 btn-group" data-toggle="buttons">
                            <label for="" class="btn btn-default">
                                <input name="yes_no@(id)" class="@(isYesValidAnswer)" id="yes_no@(id)_True" value="True" type="radio">Yes
                            </label>
                            <label for="" class="btn btn-default">
                                <input name="yes_no@(id)" class="@(isNoValidAnswer)" id="yes_no@(id)_False" value="False" type="radio">No
                            </label>
                        </div>
                    </div>
                }

    Here is my jQuery:

    $(document).ready(function () {
            $("div.alert_text").hide();
    
            $("div.question").find(':radio').click(function () {
                var isValid = $(this).hasClass('True');
                var divAlert = $(this).parents('.question').find('div.alert_text');
                
                if (!isValid) {
                    divAlert.show();
                    $(this).parents('.btn-group').find('.btn').removeClass('btn-success').removeClass('btn-danger');
                    $(this).parents('.btn').addClass('btn-danger');
                }
                else {
                    divAlert.hide();
                    $(this).parents('.btn-group').find('.btn').removeClass('btn-success').removeClass('btn-danger');
                    $(this).parents('.btn').addClass('btn-success');
                }
                
                // Enable-Disable Next Button
                if ($(":radio:checked.True").length == @Model.Count()) {
                    $("#next").prop("disabled", false).removeClass("k-state-disabled");
                }
                else {
                    $("#next").prop("checked", true).addClass("k-state-disabled");
                }
            })
        });

    Friday, June 15, 2018 12:51 PM

All replies

  • User-474980206 posted
    With WebKit the click event fires before the data is changed, while IE fires after. You should use the change event rather than click.
    Friday, June 15, 2018 3:39 PM