如何在 ajax jquery 中编写成功语句以更改单选按钮

How to write success statement in ajax jquery to change radiobuttons?

本文关键字:语句 成功 单选按钮 ajax jquery      更新时间:2023-09-26

我首先有一些html代码,其中包含一些单选按钮,每个按钮都有一个附加的跨度:

<div id="output2">
     <input type="radio" name="tid" value="1"><span class="green">Span 1</span>
                <input type="radio" name="tid" value="2"><span class="green">Span 2</span>
                <input type="radio" name="tid" value="3"><span class="green">Span 3</span>
                <input type="radio" name="tid" value="4"><span class="green">Span 4</span>
                <input type="radio" name="tid" value="5"><span class="green">Span 5</span>

我有一个ajax请求向php脚本发送请求,成功部分在这里是空的,因为这是我遇到问题的地方。

$.ajax({
       type: "POST",
                            url: "fetch_time.php",
                            data: "datum_id=" + datum_id,                   
                            beforeSend: function() {
                                $('#output2').html('<img src="loader.gif" alt="" width="24" height="24">');
                            },
                            success: function(json) {   
        });

我以 json 文件的形式从 php 脚本中获取一个返回值,如下所示:

[{"tid_id":"4"},{"tid_id":"5"}] 

我想做的是使用 json 文件 4 和 5 中的这些值,并将它们与单选按钮的值进行比较,如果 json 文件中的值与该特定单选按钮上的值相同,我希望禁用单选按钮,并将相应范围的类从 class="green" 更改为 class="red" 或者只是更改单选按钮上的可见性和跨度为零。

$.ajax({
    type: "POST",
    url: "fetch_time.php",
    data: "datum_id=" + datum_id,
    dataType: 'JSON',
    beforeSend: function () {
        $('#output2').html('<img src="loader.gif" alt="" width="24" height="24">');
    },
    success: function (arrResponseData) {
        $.each(arrResponseData, function () {
            var intValue = this.tid_id;
            $("input:radio[value=" + intValue + "]")
                    .prop("disabled", true)
                    .children("span")
                    .prop("class", "red")
        })
    }
});
我认为

,你需要做这样的事情:

success: function(json) {
    var ids = [];
    json.forEach(function(i){
        ids.push(i.tid_id);
    });
    var $inputs = $('#output2 > input');
    $inputs.forEach(function(item){
        if(ids.indexOf(item.val()) >= 0) {
            item.addClass('red');
        }
    })
}
我想

展示它完成后的样子,它现在工作得很好!!

$.ajax({
                            type: "POST",
                            url: "fetch_time.php",
                            data: "datum_id=" + datum_id,
                            dataType: 'JSON',
                             beforeSend: function() {
                             $("input:radio").prop("disabled", false)
                                             .next("span")
                                             .prop("class", "green");
                                                        },
                           success: function (arrResponseData) {
                                $.each(arrResponseData, function () {
                                    var intValue = this.tid_id;
                                    $("input:radio[value=" + intValue + "]")
                                            .prop("disabled", true)
                                            .next("span")
                                            .prop("class", "red");