Как запретить пользователю выбирать несколько переключателей в каждой строке записи, используя jquery или javascript - PullRequest
0 голосов
/ 12 июля 2020

У меня 3plus строки в записи json, которые отображались динамически, и все работает нормально.

Вот моя проблема: Пользователь может выбрать несколько переключателей вместо всего по одному переключателю в каждой строке. Пожалуйста, как мне убедиться, что для каждой строки выбран только один переключатель, используя javascript или jquery

<!doctype html>
  <html>
   <head>
<script src="jquery.min.js"></script>

  </head>
  <body> 

 <h1>Select Record using Radio button</h1>
<div id="data"></div> 

<script>

var json = [{
    "firstName": "John",
        "lastName": "Doe",
         "middlename": "m_doe"
}, {
    "firstName": "Anna",
        "lastName": "Smith",
           "middlename": "m_smith"
}, {
    "firstName": "Peter",
        "lastName": "Jones",
         "middlename": "m_Jones"
}];

$(document).ready(function(){
 var len = json.length;
            for(var i=0; i<len; i++){
              
                var firstname = json[i].firstName;
                var lastname = json[i].lastName;
                var middlename = json[i].middlename;
               

                var tr_str = "<div id='user_record'>" +
                    "<span align='center'>" + (i+1) + "</span>" +

                    "<input type='radio' id="+ lastname +">" +lastname+
                    "<input type='radio' id="+ firstname +">" +firstname+
                    "<input type='radio' id="+ middlename +">" +middlename+

                "</div><br><br>";

               $("#data").append(tr_str);
}

});





</script>

  </body>
</html>

снимок экрана, показывающий выбор нескольких переключателей в каждой строке

1 Ответ

0 голосов
/ 12 июля 2020

После серии комментариев и голосов против я понял, что где-то что-то не так. Наконец-то он заработал.

Я только что обновил значения радио и именованные переменные с уникальным идентификатором value='rec_"+ (i+1) +"' name='rec_"+ (i+1) +"' отсюда и решение ниже. теперь он работает

            "<input type='radio' value='rec_"+ (i+1) +"' name='rec_"+ (i+1) +"' id="+ lastname +">" +lastname+
            "<input type='radio' value='rec_"+ (i+1) +"' name='rec_"+ (i+1) +"' id="+ firstname +">" +firstname+
            "<input type='radio' value='rec_"+ (i+1) +"' name='rec_"+ (i+1) +"'  id="+ middlename +">" +middlename+
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...