jquery флажок для подтверждения и отклонения

Question

Я создал логи c, в которых я должен утверждать и отклонять пользователей ...

, но проблема, скажем, когда я одобряю 2 пользователей сейчас, но я должен отклонить 1 пользователя и когда я сделать флажок (утвердить) других становится непроверенным

, и когда я использую «id», logi c работает только для 1-й записи, а при использовании «class» он работает для всех сразу

что может быть правильным логином c для утверждения и отклонения

$('.approve_chk').on('click', function () {
    var pswd = prompt("enter password to confirm");
    if (pswd == 'approve') {
        alert('APPROVED');
    } else {
        alert('NOT APPROVED');
        $(".approve_chk").prop('checked', false);
    }
});

$('.reject_chk').on('click', function () {
    var pswd = prompt("enter password to confirm");
    if (pswd == 'reject') {
        alert('REJECTED');
        $(".approve_chk").prop('checked', false);

    } else {
        alert('NOT REJECTED');
        $(".reject_chk").prop('checked', false);
    }
});

Answer 1

Кажется, у вас есть несколько одинаковых classes, поэтому используйте $(this)

$('.approve_chk').on('click', function () {
    var pswd = prompt("enter password to confirm");
    if (pswd == 'approve') {
        alert('APPROVED');
    } else {
        alert('NOT APPROVED');
        $(this).prop('checked', false);
    }
});

$('.reject_chk').on('click', function () {
    var pswd = prompt("enter password to confirm");
    if (pswd == 'reject') {
        alert('REJECTED');
        $(this).closest('tr').find('.approve_chk').prop('checked', false);

    } else {
        alert('NOT REJECTED');
        $(this).prop('checked', false);
    }
});

Рабочий фрагмент:

$('.approve_chk').on('click', function () {
        var pswd = prompt("enter password to confirm");
        if (pswd == 'approve') {
            alert('APPROVED');
        } else {
            alert('NOT APPROVED');
            $(this).prop('checked', false);
        }
    });
    
    $('.reject_chk').on('click', function () {
        var pswd = prompt("enter password to confirm");
        if (pswd == 'reject') {
            alert('REJECTED');
            $(this).closest('tr').find('.approve_chk').prop('checked', false);
    
        } else {
            alert('NOT REJECTED');
            $(this).prop('checked', false);
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="checkbox" id="approve" class="approve_chk" data-id="1">Approve
    </td>
    <td>
      <input type="checkbox" id="reject" class="reject_chk" data-id="1">Reject
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" id="approve" class="approve_chk" data-id="2">Approve
    </td>
    <td>
      <input type="checkbox" id="reject" class="reject_chk" data-id="2">Reject
    </td>
  </tr>
</table>

Answer 2

генерирует динамический c идентификатор каждой строки. Пример id = "example1" id = "example2" id = "example3" и т. Д., И onClick передает этот номер строки onclick = "myfunction (1)" onclick = "myfunction (2)" onclick = "myfunction (3)" и так далее. затем в вашей функции получите число, переданное по клику, и сопоставьте его с «примером» (ваш префикс id).

Answer 3

Вам нужно будет установить флажок, чтобы снять отметку со ссылкой на значения идентификатора данных:

$('.approve_chk').on('click', function () {
    var pswd = prompt("enter password to confirm");
    if (pswd == 'approve') {
        alert('APPROVED');
    } else {
        var thisId = $(this).data(id);
        alert('NOT APPROVED');
        $(".approve_chk[data-id='" + thisId + '").prop('checked', false);
    }
});

$('.reject_chk').on('click', function () {
    var pswd = prompt("enter password to confirm");
    if (pswd == 'reject') {
        alert('REJECTED');
        var thisId = $(this).data(id);
        $(".approve_chk[data-id='" + thisId + '").prop('checked', false);

    } else {
        alert('NOT REJECTED');
        $(".reject_chk").prop('checked', false);
    }
});

Answer 4

Я полагаю, ваш html имеет несколько .approve_chk и .reject_chk. Вы должны убедиться, что вы устанавливаете опору для текущего флажка. Ваш код теперь обновляет все флажки с этими классами.

$('.approve_chk').on('click', function () {
    var pswd = prompt("enter password to confirm");
    if (pswd == 'approve') {
        alert('APPROVED');
    } else {
        alert('NOT APPROVED');
        this.prop('checked', false);
    //  ^ Refers to the clicked element.
    }
});