使用jquery在单选按钮选择上启用提交按钮时遇到麻烦



我有一个表单,我想保持提交按钮禁用,直到所需的单选按钮被选中。如果用户选中单选按钮红色,则启用提交但如果用户选中绿色,则检查是否选中了alpha或beta,如果选中,则启用提交按钮否则保持禁用,直到用户选中其中任何一个。这是我的模板和jquery代码。

<div class="type1">
     <div id="Red">
      <input type="radio" class="colorType red" name="colorType" value="Red">Red
     </div>
     <div id="Green">
      <input type="radio" class="colortype green" name="colorType" value="Green">Green
     </div>
    </div>
    <div class="type2">
     <input type="radio" class="frequency" name="frequency" value="alpha">Alpha
     <input type="radio" class="frequency" name="frequency" value="beta">Beta
    </div>
    <span class="float-right">
    <button class="button-save" disabled>Save &#38; Close</button>
</span>
我的javascript代码是
events : {
  'change .colorType': 'removeDisable'
},
  removeDisable : function(){
    if ($('.red').is(':checked')) {
      $(".button-savel").attr("disabled", false);
    } else if ($('.green').is(':checked')) {
      if ($('.frequency').is(':checked')) {
        $(".button-save").attr("disabled", false);
      }else {
        $(".button-save").attr("disabled", true);
      }
    } else {
      return false;
    }
  },

一切都很好,但是当我点击绿色并选择alpha或beta时,按钮没有被启用。否则,如果我点击红色按钮就会启用。

所以我发现了问题,我需要在点击绿色后另一个on change事件。在频率上创建一个on change事件,然后在我单击绿色时调用该函数,解决了这个问题。

events : {
'change .colorType': 'removeDisable',
'change .frequency': 'frequencyChange'
},
frequencyChange : function(){
if ($('.frequency').is(':checked')) {
    $(".button-save").attr("disabled", false);
  }else {
    $(".button-save").attr("disabled", true);
  }
},
removeDisable : function(){
if ($('.red').is(':checked')) {
  $(".button-savel").attr("disabled", false);
} else if ($('.green').is(':checked')) {
    $(".button-save").attr("disabled", true);
this.frequencyChange();
} else {
  return false;
}
},

这就解决了问题。还好我能排除故障

我猜.is()检查不成功,因为有两个项目要检查,两者不能同时检查-也许试着用'或'比较检查每个单独?

if ($($('.frequency')[0]).is(':checked') || $($('.frequency')[1]).is(':checked')) {

祝你好运!

最新更新