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

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

在 Jquery Ready 函数中调用你的 change 函数

//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');
});

<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 2

这是因为您的逻辑在 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 3

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

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

Answer 4

当页面加载时需要检查任何无线电检查或不调用一个函数，当无线电更改然后调用函数也检查所以在这种情况下我创建一个函数 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 5

您必须在使用 $(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>

Answer 6

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

但是你可以这样触发它：

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

或更短的版本：

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

建议：

• 如果你要使用上面的任何一个例子，我建议你把$("input[type=radio]").trigger('change');的那部分去掉，让事件只在页面加载时触发；

• 您不需要将bool 参数传递给.addClass() 和.removeClass()，（查看片段）

工作片段：

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

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

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

<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>

文档：

• .trigger()