首页 > 解决方案 > 单击时为输入框创建空数据属性

问题描述

我想检查 jquery 中的值是否为空或长度<2。我有一个输入框并选择框。单击复选框我试图将字段值复制到数据属性中,如 jquery 所示。我想检查值是为空或长度为 <2,并使字段带有红色边框。现在我抓住了 box.length 是在单击按钮时定义的,单击我。

$('#home_approval tbody').on('click', 'input[type="checkbox"]', function(e) {
	$(this).attr('data-price', $(this).parent('td').siblings('td:eq(6)').find('input').val());
	$(this).attr('data-currency', $(this).parent('td').siblings('td:eq(7)').find('select option:selected').val());
});
$(document).on('click', '.hitMe', function() {
	var prices = [];
	var currency = [];
	prices.push($(this).parent('td').siblings('td:eq(6)').find('input').attr('data-price'));
	currency.push($(this).parent('td').siblings('td:eq(7)').find('select option:selected').val());
	var box = $(this).parent('td').siblings('td:eq(6)').find('input').attr('data-price');
	var box1 = $(this).parent('td').siblings('td:eq(7)').find('select option:selected').val();
	if (box == '' || box.length < 2) {
		$(this).parent('td').siblings('td:eq(6)').find('input').css('border-color', 'red');
	} else if (box1 == '') {
		$(this).parent('td').siblings('td:eq(7)').find('select').css('border-color', 'red');
	}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<table id="home_approval">
    <tbody>
        <tr role="row" class="even selected">
            <td><input id="select_update" data-id="192" name="select_update" type="checkbox" data-price="" data-currency=""></td>		
            <td class="request-edit viewPopLink" id="app-rej" data-id="1819AM0192" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#myModal"><a>1819AM0192</a></td>
            <td class="fixed_width" title="senthil.manian">senthil</td>
            <td class="" title=""></td>
            <td class="fixed_width" title="Network &amp; System Administration">Administration</td>  
            <td class="fixed_width" title="C6">C6</td>
            <td class="fixed_width" title="Project_89">Project_89</td> 
            <td><input id="price" class="price_review used_asset1" maxlength="8" placeholder="Amt" name="price" type="text" ></td><td><select class="currency_type" name="currency"><option value="" selected="selected">Select</option><option value="6">AED</option><option value="5">AUD</option><option value="7">CAD</option><option value="9">EUR</option><option value="3">GBP</option><option value="1">INR</option><option value="8">KWD</option><option value="11">PHP</option><option value="10">SAR</option><option value="12">SEK</option><option value="4">SGD</option><option value="2">USD</option></select></td>			
        </tr>
    </tbody>
</table>
<button  class='hitMe'>clickme</button>

标签: jqueryhtml

解决方案


推荐阅读