jQuery $ ("# radioButton"). Зміна (...) не запускається під час де-вибору


172

Близько місяця тому питання Мітта залишилося без відповіді. На жаль, зараз я стикаюся з такою ж ситуацією.

http://api.jquery.com/change/#comment-133939395

Ось така ситуація: я використовую jQuery для зйомки змін у перемикачі. Коли вибрано перемикач, я вмикаю поле редагування. Коли вибрано перемикач, я б хотів, щоб поле редагування було вимкнено.

Підключення працює. Коли я вибираю іншу радіо-кнопку в групі, changeподія не запускається. Хтось знає, як це виправити?

<input type="radio" id="r1" name="someRadioGroup"/> 

<script type="text/javascript">
    $("#r1").change(function () {
        if ($("#r1").attr("checked")) {
            $('#r1edit:input').removeAttr('disabled');
        }
        else {
            $('#r1edit:input').attr('disabled', true);
        }
    });
</script>

Ваш поточний код прослухає зміну радіо-кнопки лише зid=r1
Rafay

1
якщо вибрано id = r2, id = r1 слід вилучити? де-вибір перемикача цим не зафіксовано?
antwarpes

2
Чк це може бути, це допоможе jsfiddle.net/aqZgs
Рафай

Не використовуйте RemoveAttr ('вимкнено'), використовуйте prop () для зміни стану, дивіться мою відповідь .
basic6

Відповіді:


311

Схоже, change()функція викликається лише під час перевірки перемикача, а не тоді, коли ви знімаєте її. Я використовував рішення - прив'язувати подію зміни до кожної перемикачі:

$("#r1, #r2, #r3").change(function () {

Або ви можете дати однаковій радіові кнопки:

$("input[name=someRadioGroup]:radio").change(function () {

Ось робочий приклад jsfiddle (оновлений з коментаря Кріса Портера.)

За коментарем @ @ Ray, вам слід уникати використання імен із .ними. Ці імена працюють у jQuery 1.7.2, але не в інших версіях ( приклад jsfiddle. ).


Рішення jsFiddle встановлюється на Mootools замість jQuery і не дозволяє йому функціонувати. Спробуйте це рішення, щоб побачити поведінку: jsfiddle.net/N9tBx . Я додав журнал змін, і ви можете легко побачити, що подія змін не запускається, коли відмічена прапорець не знімається, як перевіряється інша.
Кріс Портер

3
Синтаксис введення "[name = someRadioGroup]" неправильний. Правильний синтаксис: "input [name = someRadioGroup]: radio". Також варто зазначити, що цей метод працює лише у версії 1.7.2 JQuery. Помилка для цього надіслана. Дивіться: jsfiddle.net/zn7q2/2 для прикладу цієї помилки, якщо вам цікаво.
Рей

@Ray: Помилка виникає лише для імен з крапкою в них. Без крапки це добре працює, дивіться jsfiddle.net/zn7q2/4
Andomar

1
Приклад працює з крапками, якщо ви перейдете на "input [name = 'DateSearchOptions.Test']" (ім'я, укладене між окремими лапками): jsfiddle.net/4hTxn
Nullpo

Код "if ($ (" # myCheckbox "). Attr (" перевірено "))" Не працював у мене, мені довелося використовувати "if ($ (" # myCheckbox "). Is (": перевірено ") ) ".
Барто Бернсман

35
<input id='r1' type='radio' class='rg' name="asdf"/>
<input id='r2' type='radio' class='rg' name="asdf"/>
<input id='r3' type='radio' class='rg' name="asdf"/>
<input id='r4' type='radio' class='rg' name="asdf"/><br/>
<input type='text' id='r1edit'/>                  

jquery частина

$(".rg").change(function () {

if ($("#r1").attr("checked")) {
            $('#r1edit:input').removeAttr('disabled');
        }
        else {
            $('#r1edit:input').attr('disabled', 'disabled');
        }
                    });

ось ДЕМО


Цей працює, на відміну від інших, які були позначені як правильні: S
William Contestabile

+1. Рішення Андомара спрацювало, але це має для мене більше сенсу. Використання селектора класів запобігає необхідності зміни функції, якщо форма змінюється або має динамічне число полів. Так, за некроси! (хоча зараз через 2 роки jQuery рекомендує використовувати prop () замість attr (). api.jquery.com/prop )
Travis

8
Слід змінити .attr('checked')на .prop('checked').
Джастін

1
Поганий приклад, це не так, як це робиться. Дивіться іншу відповідь щодо відключення елементів (видалення атрибутів неправильно) .
basic6

22

Ви можете прив’язати до всіх перемикачів одночасно за назвою:

$('input[name=someRadioGroup]:radio').change(...);

Приклад роботи тут: http://jsfiddle.net/Ey4fa/


Варіант цього варіанта - $ ("введення форми: радіо"). Change (...); і перевірити специфічну опору перемикача ("перевірено"). Це дуже корисно при використанні динамічного RadioButtonList в ASP.NET.
Теренс Голла


3

Моя проблема була схожа, і це спрацювало на мене:

$('body').on('change', '.radioClassNameHere', function() { ...

0

Скажімо, ці перемикачі знаходяться всередині a, divщо має ідентифікатор, radioButtonsі що радіо кнопки мають те саме ім'я (наприклад commonName), як:

$('#radioButtons').on('change', 'input[name=commonName]:radio', function (e) {
    console.log('You have changed the selected radio button!');
});

0

changeПодія не стріляти по скасуванню вибору є бажаним поведінкою. Вам слід запустити перемикач на всю радіогрупу, а не лише на одну перемикач. І ваша радіогрупа повинна мати те саме ім’я (з різними значеннями)

Розглянемо наступний код:

$('input[name="job[video_need]"]').on('change', function () {
    var value;
    if ($(this).val() == 'none') {
        value = 'hide';
    } else {
        value = 'show';
    }
    $('#video-script-collapse').collapse(value);
});

У мене такий же варіант використання, як і у вас, тобто для показу поля введення, коли вибрана певна радіо-кнопка. Якби подія була також знята з де-селекції, я б отримував 2 події кожного разу.


0

Тут же проблема, це спрацювало чудово:

$('input[name="someRadioGroup"]').change(function() {
    $('#r1edit:input').prop('disabled', !$("#r1").is(':checked'));
});

-1

З Ajax мені працювали:

Html:

<div id='anID'>
 <form name="nameOfForm">
            <p><b>Your headline</b></p>
            <input type='radio' name='nameOfRadio' value='seed' 
             <?php if ($interviewStage == 'seed') {echo" checked ";}?> 
            onchange='funcInterviewStage()'><label>Your label</label><br>
 </form>
</div>

Javascript:

 function funcInterviewStage() {

                var dis = document.nameOfForm.nameOfRadio.value;

                //Auswahltafel anzeigen
                  if (dis == "") {
                      document.getElementById("anID").innerHTML = "";
                      return;
                  } else { 
                      if (window.XMLHttpRequest) {
                          // code for IE7+, Firefox, Chrome, Opera, Safari
                          xmlhttp = new XMLHttpRequest();
                      } else {
                          // code for IE6, IE5
                          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                      }
                      xmlhttp.onreadystatechange = function() {
                          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                              document.getElementById("anID").innerHTML = xmlhttp.responseText;
                          }
                      }
                      xmlhttp.open("GET","/includes/[name].php?id="+dis,true);
                      xmlhttp.send();
                  }
              }  

І php:

//// Get Value
$id = mysqli_real_escape_string($db, $_GET['id']);

//// Insert to database
$insert = mysqli_query($db, "UPDATE [TABLE] SET [column] = '$id' WHERE [...]");

//// Show radio buttons again
$mysqliAbfrage = mysqli_query($db, "SELECT [column] FROM [Table] WHERE [...]");
                  while ($row = mysqli_fetch_object($mysqliAbfrage)) {
                    ...
                  }
                  echo" 
                  <form name='nameOfForm'>
                      <p><b>Your headline</b></p>
                      <input type='radio' name='nameOfRadio' value='seed'"; if ($interviewStage == 'seed') {echo" checked ";} echo" onchange='funcInterviewStage()'><label>Yourr Label</label><br>
                      <input type='radio' name='nameOfRadio' value='startup'"; if ($interviewStage == 'startup') {echo" checked ";} echo" onchange='funcInterviewStage()'><label>Your label</label><br>

                  </form> ";

Це не відповідає оригінальному питанню ОП. Тут ви не використовуєте jQuery, а ви використовуєте PHP для обробки логіки перевірки, а не Javascript.
Алекс Мальчинок
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.