選択解除中にjQuery $(“#radioButton”)。change(…)が起動しない


172

約1か月前に、ミットの質問は答えられませんでした。悲しいことに、私は今、同じ状況に遭遇しています。

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の選択を解除する必要がありますか?ラジオボタンの選択解除はこれでキャプチャされませんか?
アントワープ

2
chkこれはjsfiddle.net/aqZgsの
Rafay

removeAttr( 'disabled')を使用しないでください。状態を変更するにはprop()を使用してください。私の答えを参照しください。
basic6 2015

回答:


311

このchange()関数は、ラジオボタンをオンにしたときにのみ呼び出され、オフにしていないときは呼び出されないようです。私が使用した解決策は、すべてのラジオボタンに変更イベントをバインドすることです。

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

または、すべてのラジオボタンに同じ名前を付けることもできます。

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

これは実際のjsfiddleの例です(Chris Porterのコメントから更新されました)。

@Rayのコメントによると、名前の中での使用は避けて.ください。これらの名前はjQuery 1.7.2では機能しますが、他のバージョンでは機能しません(jsfiddleの例)。


jsFiddleソリューションはjQueryではなくMootoolsに設定されており、機能しません。このソリューションを試して、動作を確認してください:jsfiddle.net/N9tBx。変更のログを追加しました。別のチェックボックスがオンになっているため、オンになっているラジオボタンがオフになっていると、変更イベントが発生していないことが簡単にわかります。
Chris Porter

3
入力 "[name = someRadioGroup]"構文が間違っています。正しい構文は、「input [name = someRadioGroup]:radio」です。また、このメソッドはJQueryのバージョン1.7.2でのみ機能することにも注意してください。これについてバグが提出されています。興味があれば、このバグの例はjsfiddle.net/zn7q2/2を参照してください。
レイ

@Ray:このバグは、ドットが含まれている名前でのみ発生します。ドットがなければ正常に
zn7q2 / 4を

1
"input [name = 'DateSearchOptions.Test']"(単一引用符で囲まれた名前)に変更すると、この例はドットで機能します。jsfiddle.net/ 4hTxn
Nullpo

コード "if($("#myCheckbox ")。attr(" checked "))"が機能しなかったため、 "if($("#myCheckbox ")。is(":checked ")を使用する必要があった)」
Bartho Bernsmann

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
ウィリアム・コンテ

+1。Andomarのソリューションは機能しましたが、これは私にはより理にかなっています。クラスセレクターを使用すると、フォームが変更されたり、フィールドの数が動的になったりした場合に、関数を変更する必要がなくなります。ネクロ投票に賛成!(現在2年後、jQueryはattr()の代わりにprop()を使用することを推奨しています。)api.jquery.com/prop
Travis

8
に変更.attr('checked')する必要があり.prop('checked')ます。
ジャスティン

1
悪い例、これはそれが行われた方法ではありません。要素を無効にする(属性の削除は間違っています)については、他の回答を参照しください。
基本6 2015

22

すべてのラジオボタンに一度に名前でバインドできます。

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

ここでの作業例:http : //jsfiddle.net/Ey4fa/


これのバリエーションは$( "form input:radio")。change(...);です。そして、特定のラジオボタンの状態をテストします( 'checked')。これは、ASP.NETで動的RadioButtonListを使用する場合に非常に役立ちます。
Terence Golla 2015


3

私の問題は似ていて、これは私にとってうまくいきました:

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

0

これらのラジオボタンがdivIDを持つa内にあり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> ";

これはOPの元の質問には答えません。ここではjQueryを使用しておらず、JavascriptではなくPHPを使用してチェックロジックを処理しています。
Alex Mulchinock
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.