การเปิด/ปิดการใช้งานเขตข้อมูลแบบฟอร์มในหลายแถวของตารางด้วย Jquery

ฉันกำลังสร้างตาราง 50 แถวและในแต่ละแถวฉันต้องการเปิด/ปิดการใช้งานฟิลด์ฟอร์มหนึ่งช่องตามค่าตัวเลือกของกล่องดรอปดาวน์ในแถวตารางเดียวกันนั้น

นี่คือตัวอย่างของสิ่งที่ฉันมี:

<tr id="tr1">
<td>
    <select id="tableDropDown" style="min-width: 100px;">
        <option>The Manufacturer</option>
        <option>Me</option>
    </select>
</td>
<td><input id="packSize" type="number" disabled></input></td>
</tr>

<tr id="tr2">
<td>
    <select id="tableDropDown" style="min-width: 100px;">
        <option>The Manufacturer</option>
        <option>Me</option>
    </select>
</td>
<td><input id="packSize" type="number" disabled></input></td>
</tr>

ฟังก์ชัน jquery ที่ฉันพยายามใช้เพื่อให้ทำงานได้ดีในแถวแรก แต่จะไม่เปลี่ยนแปลงอะไรในแถวอื่น ช่องป้อนข้อมูล "packSize" ยังคงปิดใช้งานอยู่

นี่คือสิ่งที่ดูเหมือน:

$("#tableDropDown").on('change', function(){
            if ($(this).val() === "Me") {
                $("#packSize").removeAttr('disabled');
            }

            else {
                $("#packSize").attr({'disabled': 'disabled'});
            }
});

คำแนะนำใด ๆ เกี่ยวกับสิ่งที่ฉันทำผิดจะได้รับการชื่นชมมาก ขอบคุณ.


html jquery dom
person Jonathan Bechtel    schedule 29.03.2015    source แหล่งที่มา

คำตอบ (2)


arrow_upward
0
arrow_downward

ตัวเลือกไม่มีค่าอยู่ในนั้น

ลองสิ่งนี้..

    <tr id="tr1">
<td><select id="tableDropDown" style="min-width: 100px;"><option value="other">The Manufacturer</option><option value="Me">Me</option></select></td>
<td><input id="packSize" type="number" disabled></input></td>
</tr>
<tr id="tr2">
<td><select id="tableDropDown" style="min-width: 100px;"><option value="other">The Manufacturer</option><option value="Me">Me</option></select></td>
<td><input id="packSize" type="number" disabled></input></td>
</tr>

และไม่สามารถมีรหัสเดียวกันสำหรับองค์ประกอบที่แตกต่างกันได้

person aswin    schedule 29.03.2015
comment
ฉันเพิ่งทำการเปลี่ยนแปลงตามที่คุณแนะนำ และตอนนี้ใช้ไม่ได้กับทั้งสองแถว มีการเปลี่ยนแปลงบางอย่างที่ฉันต้องทำกับฟังก์ชันของฉันเพื่อให้มันทำงานได้หรือไม่? นอกจากนี้การมี ID ที่แตกต่างกันสำหรับทุกองค์ประกอบก็ดูยุ่งยาก มีวิธีใดที่จะสร้างฟังก์ชันเพื่อหลีกเลี่ยงการทำเช่นนี้หรือไม่? - person Jonathan Bechtel; 30.03.2015
comment
หากคุณไม่มีกล่องเลือกอื่น ๆ ให้ใช้ $(select).on('change', function(){ if ($(this).val() === "Me") { $("#packSize").removeAttr('disabled'); } else { $("#packSize").attr({'disabled': 'disabled'}); } }); นี้ - person aswin; 30.03.2015

arrow_upward
0
arrow_downward

อย่าใช้ตัวเลือก ID ในกรณีของคุณ เนื่องจาก ID เป็น UNIQUE และสำหรับ javascript ในหน้าสามารถเกิดขึ้นได้เพียงครั้งเดียวเท่านั้น

(ไม่แนะนำให้ใช้รหัสที่ซ้ำกัน ให้ใช้คลาสหรือตัวเลือกอื่นแทนรหัส)

html

<table id="table">
<tr id="tr1">
<td>
    <select style="min-width: 100px;">
        <option>Me</option>
        <option>Manufacturer</option>
    </select>
</td>
<td><input type="number"></input></td>
</tr>

<tr id="tr2">
<td>
    <select style="min-width: 100px;">
        <option>Me</option>
        <option>Manufacturer</option>
    </select>
</td>
<td><input type="number"></input></td>
</tr>
</table>

เจเอส

$("#table").on('change', 'select', function(){
//    if($(this).val() == 'Manufacturer') { // by specific value or text
      if($(this)[0].selectedIndex != '0') { // by known index in option
        var el = $(this).closest('tr').find('td input'); // get input
            el.val(''); // reset value
            el.attr({'disabled': 'disabled'}); // set property
    }
    else {
        $(this).closest('tr').find('td input').removeAttr('disabled'); // remove property
    }
});

ตัวอย่างการทำงาน jsfiddle


อัปเดต

ปัญหาอะไร? เปลี่ยนเงื่อนไข if ตามที่คุณต้องการเท่านั้น ฉันอัปเดต html และสคริปต์ด้านบนแล้ว

if($(this).val() == 'Manufacturer') { // by specific value or text
if($(this)[0].selectedIndex != '0') { // by known index in option

อัปเดตตัวอย่างการทำงาน jsfiddle

person daremachine    schedule 30.03.2015
comment
เมื่อดูที่ jsfiddle มันจะเปิดใช้งานเสมอเมื่อมีการเลือกตัวเลือก ฉันต้องการให้ปิดการใช้งานหากเลือกผู้ผลิตเท่านั้น แต่ไม่ต้องการหากฉันถูกเลือก - person Jonathan Bechtel; 30.03.2015