Несколько флажков и проверка jQuery

Я делаю анкету с несколькими флажками (да, нет), и если все «не», поля ниже должны быть только для чтения и отключены, но если есть какие-либо «значки», поля должны быть обязательный. Вся анкета находится внутри таблицы и два флажка для каждого tr.Несколько флажков и проверка jQuery

Я пробую много вещей, но я уверен, что у кого-то есть лучшие идеи, чем у меня.

HTML-код выглядит следующим образом:

<div class="questionnaire_a"> 
    <table class="table questionnaire"> 
     <thead> 
      <tr> 
       <th>Is required?</th> 
       <th>YES</th> 
       <th>NO</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr id="quest" class="quest"> 
       <td>Q1</td> 
       <td><input type="checkbox" id="ques_Q1y" name="ques_Q1y" class="table quest_q"></td> 
       <td><input type="checkbox" id="ques_Q1n" name="ques_Q1n" class="table quest_q"></td> 
      </tr> 
      <tr id="quest" class="quest"> 
       <td>Q2</td> 
       <td><input type="checkbox" id="ques_Q2y" name="ques_Q2y" class="table quest_q"></td> 
       <td><input type="checkbox" id="ques_Q2n" name="ques_Q2n" class="table quest_q"></td> 
      </tr> 
      <tr id="quest" class="quest"> 
       <td>Q3</td> 
       <td><input type="checkbox" id="ques_Q3y" name="ques_Q3y" class="table quest_q"></td> 
       <td><input type="checkbox" id="ques_Q3n" name="ques_Q3n" class="table quest_q"></td> 
      </tr> 
      <tr id="quest" class="quest"> 
       <td>Q4</td> 
       <td><input type="checkbox" id="ques_Q4y" name="ques_Q4y" class="table quest_q"></td> 
       <td><input type="checkbox" id="ques_Q4n" name="ques_Q4n" class="table quest_q"></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
<div id="fields" class="fields"> 
    <select class="pos" id="pos" name="pos"></select> 
    <input type="number" step="1" class="len" id="len" name="len"> 
    <input type="number" step="1" class="he" id="he" name="he"> 
    <select class="perm" id="perm" name="perm"></select> 
</div>

Я хочу, чтобы поля ниже (вход и селекцию) для чтения или требуется, зависит флажки. Мой Jquery скрипт активен, когда изменение флажков следующим образом:

$("input[type='checkbox'][name^='ques_']:checkbox").change(function() { 
    //Code 
});

Когда я добавить новую группу:

var group = $('#group').clone(), 
     group_fields = group.find('input, select,table, td, .questionnaire, questionnaire_a, .quest_q') 

    group_fields.each(function() { 
     $(this).attr('id', $(this).attr('id') + '_' + num); 
     $(this).attr('name', $(this).attr('name') + '_' + num);

That's мой способ проверить при выборе галочки, но я не знаю как узнать, есть ли да или нет, и как подсчитать, чтобы другие поля были необходимы или читаемы.

Если какой-либо из вас есть некоторое представление о том, спасибо за помощь

источник

2015-08-01 CapAm

Вот код, чтобы включить/отключить в зависимости от того, проверяются или нет галочки. Я оставил делать это как упражнение, но должен быть довольно простым, так как я показал, как установить свойство на полях.

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <table class="table questionnaire"> 
       <thead> 
        <tr> 
         <th>Is required?</th> 
         <th>YES</th> 
         <th>NO</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr id="quest" class="quest"> 
         <td>Q1</td> 
         <td><input type="radio" id="ques_Q1y" value="y" class="table quest_q" name="ques_Q1"></td> 
         <td><input type="radio" id="ques_Q1n" value="n" class="table quest_q" name="ques_Q1" checked></td> 
        </tr> 
        <tr id="quest" class="quest"> 
         <td>Q2</td> 
         <td><input type="radio" id="ques_Q2y" value="y" class="table quest_q" name="ques_Q2"></td> 
         <td><input type="radio" id="ques_Q2n" value="n" class="table quest_q" name="ques_Q2" checked></td> 
        </tr> 
        <tr id="quest" class="quest"> 
         <td>Q3</td> 
         <td><input type="radio" id="ques_Q3y" value="y" class="table quest_q" name="ques_Q3"></td> 
         <td><input type="radio" id="ques_Q3n" value="n" class="table quest_q" name="ques_Q3" checked></td> 
        </tr> 
        <tr id="quest" class="quest"> 
         <td>Q4</td> 
         <td><input type="radio" id="ques_Q4y" value="y" class="table quest_q" name="ques_Q4"></td> 
         <td><input type="radio" id="ques_Q4n" value="n" class="table quest_q" name="ques_Q4" checked></td> 
        </tr> 
       </tbody> 
      </table> 

       <div id="fields" class="fields"> 
        <select class="pos" id="pos" name="pos"></select> 
        <input type="number" step="1" class="len" id="len" name="len"> 
        <input type="number" step="1" class="he" id="he" name="he"> 
        <select class="perm" id="perm" name="perm"></select> 
       </div> 
    </body> 

</html> 



$(document).ready(function() { 
    var radios = $("input[type='radio'][name^='ques_']"); 

    radios.change(function() { 
    updateFields(); 
    }); 

    function updateFields() { 
    var enabled = anyYesChecked(radios) 
    enableFields(enabled); 
    } 

    function anyYesChecked(cbs) { 
    var anyChecked = false; 
    $.each(cbs, function(index, cb) { 
     if (cb.value=='y' && cb.checked) anyChecked = true; 
    }); 

    return anyChecked; 
    } 

    function enableFields(enabled) { 
    // enble fields 
    $('#pos').prop('disabled', !enabled); 
    $('#len').prop('disabled', !enabled); 
    $('#he').prop('disabled', !enabled); 
    $('#perm').prop('disabled', !enabled); 

    // make fields required 
    //TODO 
    } 

    updateFields(); 
});

А вот plunkr для демонстрационных целей: http://plnkr.co/edit/vYGCrEr4WpTA7b4FdBSq?p=preview

источник

2015-08-01 00:35:02 GPicazo

Это не работает для меня, потому что этот код проверки, есть ли установлен флажок и затем может отключить поле ввода, но я должен различать «да» и «нет», чтобы иметь возможность отключать или разрешать поля, но я собираюсь измените свой код, чтобы узнать, найду ли я правильный ответ. – CapAm

ОК, извините, я пропустил это требование .. позвольте мне проверить – GPicazo

в этом случае, почему бы не использовать радиокнопки, так что только да или нет (или не оба) для каждого вопроса? – GPicazo

Может быть, вы могли бы добавить «Да» класс в да коробки. Внутри обработчика события для изменения флажка вы можете проверить количество классов «Да». Если это число больше 0, активируйте поля в полях div и добавьте требуемый атрибут.

$("input[type='checkbox'][name^='ques_']:checkbox").change(function() { 
    var yes = $(".yes:checked").length; 
    if(yes > 0){        
     $("#fields").children().prop("disabled",false).prop("required",true); 
    } 
    else{ 
    $("#fields").children().prop("disabled",true).prop("required",false); 
    } 
});

Вы можете жестко указать отключенное свойство для каждого из элементов формы, если вы хотите, чтобы они отключились.

Я тестировал его в jsfiddle: https://jsfiddle.net/seattaball/9hpc73t1/1/

источник

2015-08-01 00:46:34 OLCoder71

Мне нравится идея, я собираюсь попробовать, если работает с моим кодом. Спасибо – CapAm

Отлично работает с моим кодом, и это самый простой способ сделать это. Я пытаюсь сделать это для многих имен и полей, но не работает. Я говорю '$ (" input [id^= 'fields'] [id * = ['"+ $ rowY +"']] ")', когда id имеет такой формат: "fields_X_rowY", где X может быть чем угодно, а rowY - автоинкремент. – CapAm

Если ничто иное не начинается с "fields_", а элементы управления, которые вы пытаетесь проверить, вы должны использовать: $ ("input [id^= 'fields_']) в качестве селектора, что ограничит выбор элементов ввода, и ограничивать выбор входных данных теми, у кого есть префикс «полей» с подчеркиванием. – OLCoder71

Try используя .index(), Array.prototype.some

var input = $("input[type=checkbox][name^=ques_]:checkbox") 
 
, fields = $("#fields").find("input, select"); 
 

 
input.change(function(e) { 
 
    var res = Array.prototype.some.call(input, function(elem, idx) { 
 
    return $(elem).parent().index() === 2 && elem.checked 
 
    }); 
 
    console.log($(this).parent().index(), res); 
 
    if (res) { 
 
    fields 
 
    .each(function(i, el) { 
 
     el.disabled = true; 
 
     el.readonly = true; 
 
     el.required = false; 
 
    }) 
 
    } else { 
 
    fields 
 
    .each(function(i, el) { 
 
     el.disabled = false; 
 
     el.readonly = false; 
 
     el.required = true; 
 
    }) 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<table class="table questionnaire"> 
 
    <thead> 
 
    <tr> 
 
     <th>Is required?</th> 
 
     <th>YES</th> 
 
     <th>NO</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr id="quest" class="quest"> 
 
     <td>Q1</td> 
 
     <td> 
 
     <input type="checkbox" id="ques_Q1y" name="ques_Q1y" class="table quest_q"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox" id="ques_Q1n" name="ques_Q1n" class="table quest_q"> 
 
     </td> 
 
    </tr> 
 
    <tr id="quest" class="quest"> 
 
     <td>Q2</td> 
 
     <td> 
 
     <input type="checkbox" id="ques_Q2y" name="ques_Q2y" class="table quest_q"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox" id="ques_Q2n" name="ques_Q2n" class="table quest_q"> 
 
     </td> 
 
    </tr> 
 
    <tr id="quest" class="quest"> 
 
     <td>Q3</td> 
 
     <td> 
 
     <input type="checkbox" id="ques_Q3y" name="ques_Q3y" class="table quest_q"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox" id="ques_Q3n" name="ques_Q3n" class="table quest_q"> 
 
     </td> 
 
    </tr> 
 
    <tr id="quest" class="quest"> 
 
     <td>Q4</td> 
 
     <td> 
 
     <input type="checkbox" id="ques_Q4y" name="ques_Q4y" class="table quest_q"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox" id="ques_Q4n" name="ques_Q4n" class="table quest_q"> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<div id="fields" class="fields"> 
 
    <select class="pos" id="pos" name="pos"></select> 
 
    <input type="number" step="1" class="len" id="len" name="len"> 
 
    <input type="number" step="1" class="he" id="he" name="he"> 
 
    <select class="perm" id="perm" name="perm"></select> 
 
</div>

источник

2015-08-01 01:25:27 guest271314

Несколько флажков и проверка jQuery

ответ

Смежные вопросы