admin管理员组文章数量:1516870
I'm going to make a select option and input textbox to take the values and collect some numbers.
All I need to do is - If I select a value from the select box the text box should get disabled. The opposite should happen when I type on the text box - the select box should get disabled.
Here is what I did:
<select id="subject_items" name="subjectitems">
<option value="none">Select</option>
<option value="1-10">1-10</option>
<option value="11-20">11-20</option>
<option value="20-50">20-50</option>
<option value="50+">50+</option>
</select>
<input type="text" name="txtsubitems" id="txtsubitems" placeholder="Or type exact number"/>
<h4 id="showquote" class="formh4 text-center"></h4>
<script>
function multiplyVals(multiNum, firstNum, secondNum, addPhotoNum){
var multiNum, multiNum, secondNum, addPhotoNum;
var multiFirst = multiNum*firstNum + addPhotoNum*5 +30;
var multisecond = multiNum*secondNum + addPhotoNum*5 +30;
return "From "+ " $"+multiFirst +" To "+ " $"+multisecond;
}
function multiplyVals50(multiNum, firstNum, addPhoto){
var multiNum, multiNum, addPhoto;
var multiFirst = multiNum*firstNum + addPhoto*5 +30;
return " $"+multiFirst+"+";
}
function multiplyValsTxt(multiNum, firstNum, addPhoto){
var multiNum, multiNum, addPhoto;
var multiFirst = multiNum*firstNum + addPhoto*5 +30;
return " $"+multiFirst;
}
function displayVals() {
var numOfItem = $("#subject_items").val();
var numOfitemSingle = $("#txtsubitems").val();
var addPhoto = $("#add_photo").val();
var $towVal = $('#subject_items'), $oneVal = $('#txtsubitems');
if(numOfItem == '1-10'){
$("#showquote").html( multiplyVals(16, 1, 10, addPhoto));
$oneVal.attr('disabled', 'disabled').val('');
}
else if(numOfItem == '11-20'){
$("#showquote").html( multiplyVals(12, 11, 20, addPhoto));
}
else if(numOfItem == '20-50'){
$("#showquote").html( multiplyVals(9, 20, 50, addPhoto));
}
else if(numOfItem == '50+'){
$("#showquote").html(multiplyVals50(7, 50, addPhoto));
}
else if(numOfitemSingle <=10){
$("#showquote").html(multiplyValsTxt(16, numOfitemSingle, addPhoto));
}
else if(numOfitemSingle <20){
$("#showquote").html(multiplyValsTxt(12, numOfitemSingle, addPhoto));
}
else if(numOfitemSingle <50){
$("#showquote").html(multiplyValsTxt(9, numOfitemSingle, addPhoto));
}
else if(numOfitemSingle >50){
$("#showquote").html(multiplyValsTxt(7, numOfitemSingle, addPhoto));
}
else {
$("#showquote").html("<P>Please Choose the number of subject items </P>");\
$oneVal.removeAttr('disabled');
}
}//End displayVals function
$("select#subject_items").change(displayVals);
var qqqq = window.setInterval( function(){
displayVals()},10
);
</script>
I'm going to make a select option and input textbox to take the values and collect some numbers.
All I need to do is - If I select a value from the select box the text box should get disabled. The opposite should happen when I type on the text box - the select box should get disabled.
Here is what I did:
<select id="subject_items" name="subjectitems">
<option value="none">Select</option>
<option value="1-10">1-10</option>
<option value="11-20">11-20</option>
<option value="20-50">20-50</option>
<option value="50+">50+</option>
</select>
<input type="text" name="txtsubitems" id="txtsubitems" placeholder="Or type exact number"/>
<h4 id="showquote" class="formh4 text-center"></h4>
<script>
function multiplyVals(multiNum, firstNum, secondNum, addPhotoNum){
var multiNum, multiNum, secondNum, addPhotoNum;
var multiFirst = multiNum*firstNum + addPhotoNum*5 +30;
var multisecond = multiNum*secondNum + addPhotoNum*5 +30;
return "From "+ " $"+multiFirst +" To "+ " $"+multisecond;
}
function multiplyVals50(multiNum, firstNum, addPhoto){
var multiNum, multiNum, addPhoto;
var multiFirst = multiNum*firstNum + addPhoto*5 +30;
return " $"+multiFirst+"+";
}
function multiplyValsTxt(multiNum, firstNum, addPhoto){
var multiNum, multiNum, addPhoto;
var multiFirst = multiNum*firstNum + addPhoto*5 +30;
return " $"+multiFirst;
}
function displayVals() {
var numOfItem = $("#subject_items").val();
var numOfitemSingle = $("#txtsubitems").val();
var addPhoto = $("#add_photo").val();
var $towVal = $('#subject_items'), $oneVal = $('#txtsubitems');
if(numOfItem == '1-10'){
$("#showquote").html( multiplyVals(16, 1, 10, addPhoto));
$oneVal.attr('disabled', 'disabled').val('');
}
else if(numOfItem == '11-20'){
$("#showquote").html( multiplyVals(12, 11, 20, addPhoto));
}
else if(numOfItem == '20-50'){
$("#showquote").html( multiplyVals(9, 20, 50, addPhoto));
}
else if(numOfItem == '50+'){
$("#showquote").html(multiplyVals50(7, 50, addPhoto));
}
else if(numOfitemSingle <=10){
$("#showquote").html(multiplyValsTxt(16, numOfitemSingle, addPhoto));
}
else if(numOfitemSingle <20){
$("#showquote").html(multiplyValsTxt(12, numOfitemSingle, addPhoto));
}
else if(numOfitemSingle <50){
$("#showquote").html(multiplyValsTxt(9, numOfitemSingle, addPhoto));
}
else if(numOfitemSingle >50){
$("#showquote").html(multiplyValsTxt(7, numOfitemSingle, addPhoto));
}
else {
$("#showquote").html("<P>Please Choose the number of subject items </P>");\
$oneVal.removeAttr('disabled');
}
}//End displayVals function
$("select#subject_items").change(displayVals);
var qqqq = window.setInterval( function(){
displayVals()},10
);
</script>
- 1 Your problem is not clear. What problem you are actually facing. I can see that you are only using the select change event. You've to use keyup or keydown event for textbox to disable the select box. – Zahid Riaz Commented Jul 18, 2013 at 3:43
- how can I do that, I tried many ways and doesn't wrok with me – JS-Hero Commented Jul 18, 2013 at 3:46
- check the site fahmynow./blue – JS-Hero Commented Jul 18, 2013 at 4:00
-
1
You should always use
jQuery.prop()to toggle the disabled state of an element.jQuery.attr()does not work the way you think it does. – jahroy Commented Jul 18, 2013 at 4:32
1 Answer
Reset to default 4Better attach an event handler using .on()
Attach an event handler function for one or more events to the selected elements.
(1) On changing the SELECT, disable the textbox
$('#subject_items').on('change', function(){
$('#txtsubitems').attr("disabled", "disabled");
});
Similarly
(2) On changing the INPUT, disable the select
$('#txtsubitems').on('change', function(){
$('#subject_items').attr("disabled", "disabled");
});
I can't check this with your site, rather here is a fiddle
UPDATES:
From your ments,
$('#subject_items').on('change', function () {
console.log($(this).val());
if ($(this).val() !== 'none') {
$('#txtsubitems').prop("disabled", true);
} else {
$('#txtsubitems').prop("disabled", false);
}
});
$('#txtsubitems').on('change', function () {
if ($(this).val() !== '') {
$('#subject_items').prop("disabled", true);
} else {
$('#subject_items').prop("disabled", false);
}
});
UPDATED FIDDLE
Hope you understand.
本文标签：
版权声明：本文标题：javascript - JQuery function when onchange of select box value add attr disabled to input[text], - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.betaflare.com/web/1745267110a2650669.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论