2つの入力ラジオをチェックすると無効にされた送信ボタンが有効になりますが、チェックを外すと送信ボタンは無効になりません

Question

このコードで少し助けが必要です。

var prv3; 
var markIt3 = function(e) { 
    if (prv3 === this && this.checked) { 
    this.checked = false; 
    prv3 = null; 
    } else { 
    prv3 = this; 
    } 
}; 
$(function() { 
    $('input.class_x').on('click', markIt3); 
}); 

$('input[type=radio]').on('change', function() { 

    var current = $('input.class_x').filter(':checked'); 
    var sbmtBtn = document.getElementById('SubmitButton'); 
    sbmtBtn.disabled = true; 

    if (current.length > 1) { 
    sbmtBtn.disabled = false; 
    } else { 
    sbmtBtn.disabled = true; 
    } 
}).change(); 

私の要求は以下の通りです： は、誰もがそれをすることになっているとして、このフォームは唯一それを可能にしているため、無効にするフォームのため戻って[送信]ボタンをに欠けているものを修正することができたときに2入力タイプのラジオがチェックされていますか？

フォーム、いくつかの入力タイプラジオ付き：

この形式前の説明は、すべての主要なアイデアです。少なくとも2つをチェックするとSubmitボタンが有効になります。しかし、いずれかのチェックボックスをオフにすると、[送信]ボタンは無効にする必要がありますが、このPARTを達成することはできません。 私はITだけで少し助けてください。

私のコードをあまり変更しないでください！できますか？

チェック右ここフィドル：https://jsfiddle.net/Suiberu/70tkgk5t/13/

ありがとう！

Answer 1

実際問題は、ラジオボタンが変更として検出されないことを選択解除しています。どの程度この

var prv3; 
 
var markIt3 = function(e) { 
 
    if (prv3 === this && this.checked) { 
 
    this.checked = false; 
 
    prv3 = null; 
 
    } else { 
 
    prv3 = this; 
 
    \t } 
 
    checkIfValid(); 
 
}; 
 
$(function() { 
 
    $('input.class_x').on('click', markIt3); 
 
}); 
 

 
function checkIfValid() { 
 
    var current = $('input.class_x').filter(':checked'); 
 
    var sbmtBtn = document.getElementById('SubmitButton'); 
 
    sbmtBtn.disabled = true; 
 

 
    if (current.length > 1) { 
 
    sbmtBtn.disabled = false; 
 
    } else { 
 
    sbmtBtn.disabled = true; 
 
    } 
 
};

input { 
 
    display: block; 
 
    margin: 0.5em 0; 
 
} 
 

 
input[type='submit']:disabled { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="myform" autocomplete="off" method="post"> 
 
    <input class="class_x" type="radio" name="name_1" value="value_1" id="id_1" /> 
 
    <input class="class_x" type="radio" name="name_2" value="value_2" id="id_2" /> 
 
    <input class="class_x" type="radio" name="name_3" value="value_3" id="id_3" /> 
 
    <input type="submit" name="name_submit" value="OK" class="class_submit" id="SubmitButton" required/> 
 
</form>

Answer 2

とき変更コードが解雇されませんので、変更イベントを発生しませ..does

$('input[type=radio]').on('change', function() { 
 
    var current = $('input.class_x').filter(':checked'); 
 

 
    var $sbmtBtn = $('#SubmitButton'); 
 
    $sbmtBtn.prop('disabled', true); 
 

 
    if (current.length > 1) { 
 
    $sbmtBtn.prop('disabled', false); 
 
    } else { 
 
    $sbmtBtn.prop('disabled', true); 
 
    } 
 
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="radio" class="class_x"> 
 
    <input type="radio" class="class_x"> 
 
    <input id="SubmitButton" type="submit"> 
 
</form>

.prop() documentation

Answer 3

this.checked = false 

代わり.prop()機能を使用してみてくださいラジオボタンはチェックされていません。

$(this).change(); 

変更コードを起動します：

は、その行の後に次のコード行を追加します。

Answer 4

それとも、チェックボックスにご入力の種類を変更することができ、それは単に魔法を行います。 ここにはJSFiddle linkがあります。

var prv3; 
 
     var markIt3 = function (e) { 
 
      if (prv3 === this && this.checked) { 
 
       this.checked = false; 
 
       prv3 = null; 
 
      } else { 
 
       prv3 = this; 
 
      } 
 
     }; 
 
     $(function() { 
 
      $('input.class_x').on('click', markIt3); 
 
     }); 
 

 
    
 
     $('input[type=checkbox]').on('change', function() { 
 
      
 
      var current = $('input.class_x').filter(':checked'); 
 
      var sbmtBtn = document.getElementById('SubmitButton'); 
 
      sbmtBtn.disabled=true; 
 

 
      if (current.length > 1) { 
 
       sbmtBtn.disabled = false; 
 
      } else { 
 
       sbmtBtn.disabled = true; 
 
      } 
 
      
 
      
 
     }).change();

input { 
 
    display: block; 
 
    margin: 0.5em 0; 
 
} 
 

 
input[type='submit']:disabled { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="myform" autocomplete="off" method="post"> 
 
     <input class="class_x" type="checkbox" name="name_1" value="value_1" id="id_1" /> 
 
    <input class="class_x" type="checkbox" name="name_2" value="value_2" id="id_2" /> 
 
    <input class="class_x" type="checkbox" name="name_3" value="value_3" id="id_3" /> 
 
     <input type="submit" name="name_submit" value="OK" class="class_submit" id="SubmitButton" required /> 
 
    </form>

のみのタイプはチェックボックスにあるラジオボタンから変更されています。