javascript - 如何更改复选框内的类属性

Question

如果用户在输入字段中输入一个值，复选框上的类值将自动更改

输入字段：

 <input style="width:25px; margin-left:5px;" type="text" name="qtyA" id="qtyA"  />

复选框：

<input id="INsrv1" name="INopt" type="checkbox" value="1" />1<br>   
<input id="INsrv2" name="INopt" type="checkbox" value="2" />2<br>   
<input id="INsrv3" name="INopt" type="checkbox" value="3" />3<br>   
<input id="INsrv4" name="INopt" type="checkbox" value="4" />4<br>

javascript:

<script>
$(document).ready(function() {
$('#qtyA').on('change', function() {
    var max = $(this).val();
 });

    $("[name$='INopt']").prop('class','validate[minCheckbox[1],maxCheckbox[max]] checkbox text')
    });
</script>

例如：

用户在输入字段“qtyA”中输入 3

价值：3

脚本上的 maxCheckbox[] 值将随之改变

从 maxCheckbox[1] 到 maxCheckbox[3]

实际代码：

  <script>
$(document).ready(function() {

 $('#qtyA').on('change', function() {
    var max = $(this).val();
    alert(max);
 });

$("#srv").on('change', function() {
    var max = $('#qtyA').val();
    alert(max);
    var selVal = $(this).val();
        if (selVal == 'Inbound') { // Inbound
            $('.Inbound').show();
            $('.Outbound').hide();
            $("[name$='OUTopt']").prop('class','')
            $("#OUTsrvOtr").prop('class','')

            $("[name$='INopt']").prop('class','validate[minCheckbox[1],maxCheckbox[max]] checkbox text')
            $('#valOUT').val('');
            $('div#Outbound').find('span').prop('class','');

        }
        else if (selVal == 'Outbound') { // Outbound
            $('.Inbound').hide();
            $('.Outbound').show();
            $("[name$='INopt']").prop('class','')
            $("#INsrvOtr").prop('class','')

            $("[name$='OUTopt']").prop('class','validate[minCheckbox[1],maxCheckbox[max]] checkbox text')
                $('#valIN').val('');
            $('div#Inbound').find('span').prop('class','');

        }
        else {
            $('.Inbound').hide();
            $('.Outbound').hide();
            $('#valOUT').val('');
            $('#valIN').val('');
            $("[name$='INopt']").prop('class','')
            $("#OUTsrvOtr").prop('class','')
            $('div#Inbound').find('span').prop('class','');

            $("[name$='OUTopt']").prop('class','')
            $("#OUTsrvOtr").prop('class','')
            $('div#Outbound').find('span').prop('class','');
        }
    });
});
</script>

Answer 1

$(document).ready(function() {
$("input").onchange(function() {
    $(this).attr('class','validate[minCheckbox[1],maxCheckbox[1]] checkbox text')
}
});