Question

我在检查收音机时检查删除禁用的课程否则添加禁用课程，它工作正常。但是在已经检查了无线电的页面加载时，它没有删除被禁用的类。有时候已经选择了收音机，因为页面是使用php动态加载的。

Html代码

<input class="selectOwner" name="owner" id="owner1" type="radio" value="1" />
<input class="selectOwner" name="owner" id="owner2" type="radio" value="2" />
<input class="selectOwner" name="owner" id="owner3" type="radio" value="3" />
<a href="#" id="situation" class="btn disabled">Next step</a>

JS

//Checkbox work situation
$('.selectOwner').change(function() {
    if (this.checked) {
        $("#situation").removeClass('disabled', this.checked);
    } else {
        $("#situation").addClass('disabled', this.checked);
    }
});
$("input[type=radio]").trigger('change');

有人可以帮忙吗？提前谢谢。

Answer 1

您的所有逻辑都在change事件上，该事件未在页面加载时触发。

但你可以像这样触发它：

$(document).ready(function(){
    $('.selectOwner').trigger('change');
});

或更短的版本：

$(function(){ $('.selectOwner').trigger('change'); })

<强>建议：

如果你打算使用上面的任何一个例子，我建议你删除$("input[type=radio]").trigger('change');的部分，然后只在页面加载时触发事件;
< / LI>
您不需要将bool参数传递给.addClass()和.removeClass()，（查看代码段）

工作代码段

＆＃13;

//Checkbox work situation
$('.selectOwner').change(function() {
    if (this.checked) {
        $("#situation").removeClass('disabled');
    } else {
        $("#situation").addClass('disabled');
    }
});

$(function(){ $('.selectOwner').trigger('change'); })

＆＃13;

/* CSS for better Visualization */
.disabled{
    background-color: gray;
    border:1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="selectOwner" name="owner" id="owner1" type="radio" value="1" /> Orange
<input class="selectOwner" name="owner" id="owner2" type="radio" value="2" checked/> Apple
<input class="selectOwner" name="owner" id="owner3" type="radio" value="3" /> Lemon

<br>
<br>
<span id="situation">Situation</span>

＆＃13;

<强>文档

.trigger()

Answer 2

在Jquery Ready功能中调用您的更改功能

＆＃13;

//Checkbox work situation
$('.selectOwner').change(function(){
  if (this.checked){
    $("#situation").removeClass('disabled', this.checked);
  } else {
    $("#situation").addClass('disabled', this.checked);
  }   
});

$("input[type=radio]").trigger('change');
$(document).ready(function(){
  $('.selectOwner').trigger('change');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="selectOwner" name="owner" id="owner1" type="radio" value="1" />
<input class="selectOwner" name="owner" id="owner2" type="radio" value="2" />
<input class="selectOwner" name="owner" id="owner3" type="radio" value="3" />
<a href="#" id="situation" class="btn disabled">Next step</a>

＆＃13;

Answer 3

这是因为您的逻辑位于change事件function中，因此仅在您的单选按钮更改时触发。

您需要使用自己的逻辑创建function，并在收音机change和文档ready时调用它。

function checkRadios(){
 var checked = $("input[type='radio']:checked").val();
 console.log(checked);
}

$(document).ready(function(){
  checkRadios();
});

$("input[type='radio']").change(function(){
  checkRadios();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="radio" value="first" />
<input type="radio" name="radio" value="second" checked/>
<input type="radio" name="radio" value="third"/>

Answer 4

或者在文档准备就绪时添加另一个测试：

$(document).ready(function(){
        if($('.selectOwner').is(':checked')) {
           $("#situation").removeClass('disabled', this.checked);
        } else{
           $("#situation").addClass('disabled', this.checked);
        }
    });

Answer 5

当页面加载然后需要检查任何无线电检查，所以调用一个函数，当无线电改变然后调用函数，也检查，所以在这种情况下，我做一个函数checkedTest调用onload和onchange时间

$('.selectOwner').change(function(){
        checkedTest(); // call this 
    });

    $(document).ready(function(){
        checkedTest(); // onload call this
    });

    function checkedTest() {
        // check that any radio is checked or not
        if($("input:radio[name='owner']").is(":checked")) {
            $("#situation").removeClass('disabled');
        } else {
            $("#situation").addClass('disabled');
        }

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="selectOwner" name="owner" id="owner1" type="radio" value="1" />
<input class="selectOwner" name="owner" id="owner2" type="radio" value="2" />
<input class="selectOwner" name="owner" id="owner3" type="radio" value="3" />

<a href="#" id="situation" class="btn disabled">Next step</a>

Answer 6

你必须在使用 $(document).ready(function(){} 加载DOM时调用该函数，并在为用户观点禁用链接时执行某种样式，如下所示

未选中选项时

function radioChange() {
  if ($("input:radio[name='owner']").is(":checked")) {
    $("#situation").removeClass('disabled');
  } else {
    $("#situation").addClass('disabled');
  }
}
$(document).ready(function() {
  radioChange();
  $('.selectOwner').change(function() {
    radioChange();
  });
})

body {
  font: 13px Verdana;
}

.btn.disabled {
  opacity: .5;
  pointer-events: none;
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="selectOwner" name="owner" id="owner1" type="radio" value="1" />
<input class="selectOwner" name="owner" id="owner2" type="radio" value="2" />
<input class="selectOwner" name="owner" id="owner3" type="radio" value="3" />
<a href="#" id="situation" class="btn">Next step</a>

已选中选项

function radioChange() {
  if ($("input:radio[name='owner']").is(":checked")) {
    $("#situation").removeClass('disabled');
  } else {
    $("#situation").addClass('disabled');
  }
}
$(document).ready(function() {
  radioChange();
  $('.selectOwner').change(function() {
    radioChange();
  });
})

body {
  font: 13px Verdana;
}

.btn.disabled {
  opacity: .5;
  pointer-events: none;
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="selectOwner" name="owner" id="owner1" type="radio" value="1" checked />
<input class="selectOwner" name="owner" id="owner2" type="radio" value="2" />
<input class="selectOwner" name="owner" id="owner3" type="radio" value="3" />
<a href="#" id="situation" class="btn">Next step</a>

jQuery检查加载时是否选择了radio选项

6 个答案: