Question

<script type="text/javascript">
$(document).ready(function() {
    $('#BUTTON_1').on('click', function() {

    });
});
</script>

...

<td>
    <select id="selectBox" name="selectBox">
    <option value="R01"> REQUESTED </option> 
    <option value="R02"> NOT FINISHED </option> 
    <option value="R03"> FINISHED </option> 
</td>

<td>
<a href="#"  class="btnA" id= "BUTTON_1" value="N">UNCHECKED</a> 
<a href="#"  class="btnA" id= "BUTTON_2" value="N">UNCHECKED</a> 
<a href="#"  class="btnA" id= "BUTTON_3" value="N">UNCHECKED</a> 
</td>

...

<div>
<a id="fnModEncProc" class="btnB"><strong>SAVE YOUR WORK</strong></a>
</div>

所以当我第一次打开页面时，我有一个选择框，3个按钮和SAVE按钮。

选择框有3个选项（默认为 REQUESTED ）

当我点击每个“UNCHECKED”按钮时，我希望它切换到“CHEKCED”。（BUTTON _2,3相同）
当只有一个或两个按钮已检查时 - >然后在选择框中选择已完成 - ＆gt;然后点击“保存您的工作”

然后警告框应弹出“必须点击所有三个按钮才能完成”文字。

++ 简而言之，当选中一个或两个CHECKED时，单击保存按钮时，应选择 NOT FINISHED 选择框选项。

但是当全部都是CHECK时，单击保存按钮时，应选择框选项作为完成。

任何人都可以帮我编码吗？

Answer 1

fiddle Demo

$('.btnA').click(function (e) {
    e.preventDefault();
    var txt = $(this).text();
    txt = (txt == 'UNCHECKED') ? 'CHECKED' : 'UNCHECKED'; //toggle text
    $(this).text(txt);
});
$('#selectBox').change(function () {
    if (this.value === 'R03') {
        var len = $('.btnA').filter(function () {
            return $(this).text() === 'CHECKED'
        }).length; //get length of button with text CHECKED
        if (len !== 3) {
            $(this).val('R01'); //set value first to drop-down list
            alert('All three buttons must be clicked in order to be FINISHED');
        }
    }
});
$('#fnModEncProc').click(function () {
    $('#selectBox').change();
    var len = $('.btnA').filter(function () {
        return $(this).text() === 'CHECKED'
    }).length; //get length of button with text CHECKED
    if (len === 3) $('#selectBox').val('R03'); //if length = 3 select FINISHED in drop-down list
});

<小时/> Updated fiddle Demo

$('.btnA').click(function (e) {
    e.preventDefault();
    var txt = $(this).text(),
        val;
    if (txt === 'UNCHECKED') {
        txt = 'CHECKED';
        val = 'Y';

    } else {
        txt = 'UNCHECKED';
        val = 'N';
    }
    $(this).text(txt).prop('value', val); //set value to val
});

Answer 2

$('.btnA').click(function (e) {
    e.preventDefault();
    $(this).addClass('checked').text('Checked');
    var num_checks = $('.btnA.checked').length;
    $('#selectBox').val(num_checks < 3 ? 'R02' : 'R03');
});

$('#fnModEncProc').click(function () {
    if ($('.btnA.checked').length < 3) {
        alert('Must have 3 checked');
    }else{
        /* run save code*/
    }
})

不完全清楚用户是否应该能够uncheck。此版本未内置

的 DEMO

切换按钮并选择框

2 个答案: