如何在复选框内更改类属性

时间:2012-10-01 04:15:42

标签: javascript validation class checkbox

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

输入字段:

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

1 个答案:

答案 0 :(得分:1)

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