ブラウズフォームがクリックされたときに必要なプロパティを追加します

Question

私は非常に単純なファイルブラウザで、Webサイト上のダウンロード可能なファイルをPHPで分類しています。 意図は、希望のユーザー名を入力してそのフォルダのサムネイルをブラウズしてアップロードするだけで、新しいフォルダを作成できるということでした。

これに取り組んでいるうちに、新しい画像をアップロードしたり、重複したファイルを作成したりする代わりに、元の画像を選択すると便利です。

これが私のしたことです。私はラジオボタンと画像を含むラジオボタンと、ブラウズ入力を保持するラジオボタンを1つ使用することに決めました。

ブラウズ入力が選択されていると、必要なプロパティを設定する必要がありますが、既存のイメージがリストから選択されるとプロパティを削除する必要があります。 夕方に苦労した後、私はこのことを考え出しました：http://jsfiddle.net/p8u75xje/2/
ブラウズ入力の隣にあるラジオボタンをクリックする限り、これはうまくいくようです。既存の画像をクリックすると気になり、ブラウズフィールドをクリックしてキャンセルし、必要なプロパティを設定していないフォームを送信し、「デジタルエア」をアップロードしないようにします

必要なプロパティは、ラジオボタンがクリックされたときだけでなく、それらのボタンが最終結果に隠されているのを見るので、ブラウズ入力をクリックするときにも設定されます。

<form> 
    <label> 
     <input type="radio" name="dlthumbs" value="upload" id="newimg" 
     onclick="document.getElementById('image').focus()" required checked="checked"> 

     <input type="file" name="image" id="image" 
     onclick="document.getElementById('newimg').checked=true" required> 
    </label> 

    <label id='thumbexcists'> 
     <input type="radio" name="dlthumbs"> 
     <img style='width: 50px; height: 50px' src='$catthumb'> 
    </label> 
    <label id='thumbexcists'> 
     <input type="radio" name="dlthumbs"> 
     <img style='width: 50px; height: 50px' src='$catthumb'> 
    </label> 
<script> 
    $('input[name="dlthumbs"]').change(function() { 
     if($("#newimg").is(':checked')) { 
      $('#image').prop('required', true); 
     } else { 
      $('#image').removeAttr('required'); 
     } 
    }); 
</script> 
<input type="submit" name="catcreate" id="butedit" class="butedit" value="Create" /> 
</form> 

Answer 1

実行手順のコード例を参照してください。

$(document).ready(function() { 
 
    $('input[name="dlthumbs"]').change(checkRequired); 
 

 
    // since you're defaulting to the "newimg" being checked, 
 
    // you probably want to run this on page load as well 
 
    checkRequired(); 
 
}); 
 

 

 

 
function checkRequired() { 
 
    if ($("#newimg").is(':checked')) { 
 
    $('#image').prop('required', true); 
 
    } else { 
 
    // #newimage is currently set to required in your markup. toggle that too. 
 
    $('#image, #newimg').removeAttr('required'); 
 
    
 
    // could add #newimg to prop('required', true) above but it doesn't really need to be. 
 
    // The file input is what's required. 
 

 
    } 
 
}

/* CSS to make it all obvious in the test. */ 
 
[required] { 
 
    padding: 10px; 
 
    background-color: red; 
 
    font-size: 2em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     <label> 
 
      <input type="radio" name="dlthumbs" value="upload" id="newimg" onclick="document.getElementById('image').focus()" required checked="checked"> 
 
    
 
      <!-- 
 
       Trigger a click on "newimage". This runs the checkRequired() code. 
 
       Also removed required from the element. JS will handle that. 
 
       You could also change the name of this input to dlthumbs. 
 
      --> 
 
      <input type="file" name="image" id="image" onclick="document.getElementById('newimg').click()"> 
 
     </label> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <label id='thumbexcists'> 
 
      <input type="radio" name="dlthumbs"> 
 
      <img style='width: 50px; height: 50px' src='$catthumb'> 
 
     </label> 
 
     <label id='thumbexcists'> 
 
      <input type="radio" name="dlthumbs"> 
 
      <img style='width: 50px; height: 50px' src='$catthumb'> 
 
     </label> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    <script> 
 
    </script> 
 
    <input type="submit" name="catcreate" id="butedit" class="butedit" value="Create" /> 
 
</form>